title: JQuery click event firing multiple times
body: <p>I know that there's lot here on already on multiple click events being fired off, I think I've read them all but still can't see what's going wrong here.</p>
  
  <p>Hope fully I'm missing something obvious that someone else can pick up easily...</p>
  
  <p>Some background</p>
  
  <p>My code works inside an Enterprise Social Networking platform and creates a BI dashboard for content analysis (about a 1000 lines of the stuff, mostly domain specific, so too much to post in it's entirety).</p>
  
  <p>The part that is causing me grief is the function that builds the dashboard visualisation itself.</p>
  
  <p>Here goes...</p>
  
  <pre><code>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 += "&lt;div id='" + ownerName + "' class='ownerData'&gt;";
     html += "&lt;div class='ownerHeading'&gt;" + ownerName + "&lt;/div&gt;";
     html += this.policies.length + " Policy documents maintained&lt;br /&gt;"; // policies is an array of docs managed by owner
  
     divIDReview = "dboard_" + ownerName + "reviewchart";
     html += "&lt;div id='" + divIDReview + "' class='dboardelement'&gt;&lt;/div&gt;";
  
     divIDType = "dboard_" + ownerName + "typechart";
     html += "&lt;div id='" + divIDType + "' class='dboardelement'&gt;&lt;/div&gt;";
  
     divIDStatus = "dboard_" + ownerName + "statuschart";
     html += "&lt;div id='" + divIDStatus + "' class='dboardelement'&gt;&lt;/div&gt;";
  
     html += "&lt;div id='" + ownerName + "ToggleTable' class='toggletable' owner='" + ownerName + "'&gt;";
     html += "Click to display all " + ownerName + " documents&lt;br /&gt;&lt;/div&gt;";
     html += "&lt;div id='" + ownerName + "polTable' class='poltable'&gt;";
     html += getPolTable(this.policies); // Returns an HTML table of doc metadata
     html += "&lt;/div&gt;";
  
     html += "&lt;/div&gt;";
     $("#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&lt;br/&gt;");
         $(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&lt;br    /&gt;");
         $(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); 
   }); 
   }
  </code></pre>
  
  <p>Hopefully that's enough to illustrate the problem.</p>
  
  <p>You'll see that the code builds a dashboard display for each polOwner consisting of three pie charts and an option to hide or display a table of underlying data.</p>
  
  <p>I started by applying the click event to the <code>.toggletable</code> class. When that fired multiple times I used the method described on another answer here with the <code>.each</code> to attach a unique event to each instance of the class.</p>
  
  <p>So, what happens?</p>
  
  <p>There are currently 9 <code>polOwners</code> and at first glance, the click event only seems to be toggling the display state of every other table. The console log however shows that this is because it is firing 9 times for the first instance, 8 for the second, 7 for the third etc. with the odd numbers leaving the table in the alternate state (when this works the display will change to a <code>.toggle</code> animation).</p>
  
  <p>For info, While I'm a text editor person, I do have a copy of MS Expression Web 4 which is a useful tool for error checking HTML. I've pasted in a copy of the entire generated markup (nearly 4000 lines) and can't see any bad nesting or structure errors.   </p>
  
  <p>Any ideas folks?</p>