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); 
}); 
} 

がうまくいけば、それは問題を説明するには十分です。

このコードは、3つの円グラフと、基礎となるデータの表を表示または非表示するオプションからなる各polOwnerのダッシュボード表示を構築しています。

クリックイベントを.toggletableクラスに適用することから始めました。それが複数回発生したとき、私は.eachの別の答えに記載されている方法を使用して、クラスの各インスタンスに一意のイベントを付加しました。

だからどうしますか？

現在、9 polOwnersがあり、一見するとクリックイベントは他のすべての表の表示状態を切り替えるように見えます。コンソールログには、最初のインスタンスでは9回、2番目のインスタンスでは8回、3番目のインスタンスでは7回、その他の場合は奇数番号でテーブルが代替状態になります（これが動作するとディスプレイはa .toggleアニメーション）。

私はテキストエディタの人間ですが、エラーチェック用の便利なツールであるMS Expression Web 4があります。私は、生成されたマークアップ全体（4000行程度）のコピーを貼り付けており、ネスティングや構造エラーは見られません。

アイデアの皆様？

Answer 1

あなたは、いくつかのネストされたループを持っている：各polOwnerに対して

// 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 
    }); 
}); 

はあなたがtoggletableクラスを持つdiv要素を追加しています。その内部では、toggletableクラスで各divをループし、クリックイベントを追加します。

これは、最初のpolOwnerに対して1回、2回目に2回、3回目に3回などを追加します。

toggletableに polOwnerそれぞれの各外を移動し

、あなたが