JQuery click event firing multiple times

Question

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.

Hope fully I'm missing something obvious that someone else can pick up easily...

Some background

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).

The part that is causing me grief is the function that builds the dashboard visualisation itself.

Here goes...

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

Hopefully that's enough to illustrate the problem.

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.

I started by applying the click event to the .toggletable class. When that fired multiple times I used the method described on another answer here with the .each to attach a unique event to each instance of the class.

So, what happens?

There are currently 9 polOwners 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 .toggle animation).

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.

Any ideas folks?

Answer 1

You've got some nested loops:

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

For each polOwner you are adding a div with the toggletable class. Then inside there you are looping through each div with a toggletable class and adding a click event.

This adds 1 click for the first polOwner, 2 for the second, three for the third and so on.

Move the toggletable each outside of the polOwner each and you should be good