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，乍一看，点击事件似乎只是切换每个其他表格的显示状态。然而，控制台日志显示，这是因为第一个实例触发了 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 类循环遍历每个 div 并添加一个点击事件。

这会为第一个 polOwner 添加 1 次点击，为第二个添加 2 次，为第三个添加 3 次，依此类推。

将toggletable 移到polOwner 之外，你应该会很好