Question

我从外部API中提取一些数据，然后将其显示在仪表板页面中。为此，我在处理数据后生成DOM元素，如下所示：

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

但是，当我点击任何新生成的span元素时，我会收到companies中最后一个值的提醒。例如，如果我声明了：

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

然后点击Google span和Apple span会提醒4。我希望的行为是点击Google span以提醒3。

Answer 1

这个怎么样： -

使用事件延迟将事件处理程序与on()连接一次。（参见课程添加compName）。并只使用其id。

请参阅委派事件处理程序引用here。如果DOM中已存在somediv，那么您可以使用$('#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

您需要使用闭包捕获key值，因为循环将在click处理程序实际执行时完成。试试这个：

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

或者，您可以alert id，因为这就是您设置的内容：

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

Answer 3

那是因为在调用函数之前变量键会被更改。你需要一个闭包来阻止它被外部代码修改：

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

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

3 个答案: