JQuery点击事件触发多次

Question

我知道这里有很多关于已被点击的多个点击事件，我想我已经阅读了它们，但仍然看不到这里出现了什么问题。

希望完全我失去了一些东西很明显，其他人可以轻松地拿起...

一些背景

我的代码工作的企业社交网络平台内部和内容分析创建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构建仪表板显示，并隐藏或显示基础数据表。

我开始将点击事件应用到.toggletable类。当多次触发时，我用.each的另一个答案中描述的方法将一个唯一事件附加到类的每个实例。

那么，会发生什么？

目前有9 polOwners，乍一看，click事件似乎只是切换每个其他表的显示状态。然而，控制台日志显示，这是因为它在第一次实例中是9次，第二次是8次，第三次是7次，奇数号码在备用状态下离开表格（当此操作时，显示器将更改为一个.toggle动画）。

对于信息，虽然我是一个文本编辑人员，但我确实拥有MS Expression Web 4的副本，这是一个用于错误检查HTML的有用工具。我粘贴了整个生成的标记（近4000行）的副本，并且看不到任何错误的嵌套或结构错误。

任何想法的人？

Answer 1

你已经有了一些嵌套的循环：

// 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类和添加一个点击事件。

这会为第一个polOwner添加1次点击，为第二个添加2个点击，为第三个添加3个，等等。

移动toggletable每个polOwner的每个之外，你应该是好