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的每個之外，你應該是好