我知道这里已经有很多关于多个点击事件被触发的内容，我想我已经阅读了它们，但仍然看不出这里出了什么问题。
完全希望我错过了一些其他人可以轻松捡起的明显的东西......
一些背景
我的代码在企业社交网络平台中工作，并创建了一个用于内容分析的 BI 仪表板(大约 1000 行内容，大部分是特定于域的，所以太多了，无法完整发布(。
引起我悲伤的部分是构建仪表板可视化本身的功能。
来了...
function makePage(){
$("#policyCount").text(policyCount);
var docTypes=getGlobalDocTypes(polOwners); //returns a constrained vocab array
var statusTypes=getGlobalStatusTypes(polOwners); //returns a constrained vocab array
$.each(polOwners,function(){ // polOwners is a global array that contains the BI data to be visualised
html=""
var ownerName = this.name.split(":")[1]; // name is a str in format "Owner:HR"
html += "<div id='" + ownerName + "' class='ownerData'>";
html += "<div class='ownerHeading'>" + ownerName + "</div>";
html += this.policies.length + " Policy documents maintained<br />"; // policies is an array of docs managed by owner
divIDReview = "dboard_" + ownerName + "reviewchart";
html += "<div id='" + divIDReview + "' class='dboardelement'></div>";
divIDType = "dboard_" + ownerName + "typechart";
html += "<div id='" + divIDType + "' class='dboardelement'></div>";
divIDStatus = "dboard_" + ownerName + "statuschart";
html += "<div id='" + divIDStatus + "' class='dboardelement'></div>";
html += "<div id='" + ownerName + "ToggleTable' class='toggletable' owner='" + ownerName + "'>";
html += "Click to display all " + ownerName + " documents<br /></div>";
html += "<div id='" + ownerName + "polTable' class='poltable'>";
html += getPolTable(this.policies); // Returns an HTML table of doc metadata
html += "</div>";
html += "</div>";
$("#owners").append(html); // When this function is called #owners is an empty div
$(".toggletable").mouseover(function(){
$(this).css({'cursor':'pointer','text-decoration':'underline'});
});
$(".toggletable").mouseout(function(){
$(this).css( {'cursor':'default','text-decoration':'none'});
});
$(".toggletable").each(function(i, elem){
$(elem).click(function(){
if ($(this).next(".poltable").css("display")=="none"){
// Currently hidden - so show
if (debug){console.log($(this).attr("id") + " was clicked")}
$(this).html("Click to hide " + $(this).attr('owner') + " documents<br/>");
$(this).next(".poltable").css("display","block");
} else {
if (debug){console.log($(this).attr("id") + " was clicked")}
$(this).html("Click to display all " + $(this).attr('owner') + " documents<br />");
$(this).next(".poltable").css("display","none");
}
});
});
// the next section calls functions that use the Google vis api to draw pie charts
drawPie(300,200, "Review Status", "Status", "Policies", getReviewStatus(this.policies), ["green","orange","red"], divIDReview);
drawPie(300,200, "Document Types", "Type", "Docs", getDocTypes(this.policies, docTypes), [], divIDType);
drawPie(300,200, "Document Status", "Status", "Docs", getStatusTypes(this.policies, statusTypes), [], divIDStatus);
});
}
希望这足以说明问题。
你将看到，该代码为每个 polOwner 构建了一个仪表板显示，该显示由三个饼图和一个用于隐藏或显示基础数据表的选项组成。
我首先将 click 事件应用于 .toggletable 类。当它多次触发时，我使用了此处另一个答案中描述的方法，.each将唯一事件附加到类的每个实例。
那么，会发生什么呢？
目前有 9 个polOwners，乍一看，单击事件似乎只是切换其他每个表的显示状态。但是，控制台日志显示这是因为它为第一个实例触发 9 次，第二个实例触发 8 次，第三个实例触发 7 次，依此类推，奇数使表处于交替状态(当此操作工作时，显示将更改为.toggle动画(。
对于信息，虽然我是一个文本编辑人员，但我确实有一个MS Expression Web 4的副本，这是一个用于错误检查HTML的有用工具。我已经粘贴了整个生成的标记的副本(近 4000 行(，并且看不到任何不良的嵌套或结构错误。
伙计们有什么想法吗？
你有一些嵌套的循环：
// jQuery each on polOwners
$.each(polOwners,function(){
// ... code that appends .toggletable class
// jQuery each on .toggletable class
$(".toggletable").each(function(i, elem){
// code that runs on the toggletable element
});
});
对于每个 polOwner，您都在添加一个带有 toggletable 类的div。然后在那里，你用一个toggletable类循环遍历每个div，并添加一个点击事件。
第三个 polOwner 添加 3 次单击，依此类推。
将每个toggletable移到polOwner之外，你应该很好