将事件处理程序附加到JQuery生成的DOM元素

Question

I'm pulling some data from an external API and then displaying it in a dashboard page. To do this, I'm generating DOM elements once I've processed the data, like so:

for(var key in companies) {
    $(document.createElement("span"))
      .attr({ id: key })
      .appendTo($("#someDiv"))
      .click(function() {
          alert(key);
      });
      $("#"+key).html("<b>" + key + "</b>: $"+companies[key]+"<br>");
  }

However, when I click on any of the newly generated span elements, I get an alert with the last value in companies . For example, if I had declared:

var companies = {
    "Google": 3,
    "Apple": 4
};

then clicking on both the Google span and the Apple span would alert 4 . My desired behavior is clicking on the Google span to alert 3 .

Answer 1

How about this:-

Attach the event handler using event delagtion with on() just once. (See the class added compName ). and just using its id .

See Delegated event handler reference here . If somediv already exist in DOM then you can just use $('#someDiv').on('click','.compName',function(){...

$(function(){
$(document).on('click','.compName',function(){ 
//.....
   alert(this.id);
//....
});
....
for(var key in companies) {
    $(document.createElement("span"))
      .attr({ id: key, 'class':'compName' }).html("<b>" + key + "</b>: $"+companies[key]+"    
      <br>").html("<b>" + key + "</b>: $"+companies[key]+"<br>").
      .appendTo($("#someDiv"));

  }
//...
})

Answer 2

You need to capture the key value with a closure, since the loop will have finished by the time the click handler actually executes. Try this:

.click((function() {
    return function () {
        alert(key);
    };
})());

Or, you can just alert its id , since that's what you set it as:

.click(function () {
    alert(this.id);
});

Answer 3

That's because the variable key gets changed before you call the function. You need a closure around it to prevent it from modified by the outer code:

for(var key in companies) {
    $(document.createElement("span"))
      .attr({ id: key })
      .appendTo($("#someDiv"))
      .click((function(privatekey) {
          return function(){
              alert(privatekey);
              };
      })(key));
      $("#"+key).html("<b>" + key + "</b>: $"+companies[key]+"<br>");
  }