将事件处理程序添加到动态添加的元素

以下示例页面会根据foo对象附加三个<button>标记，并且在单击时，我期望它们输出foo中的值。例如，点击ID为btn1的按钮，我希望得到输出Title:baz, ID:7198。但是，每个按钮按下输出Title:whizbang, ID:7119。将事件处理程序添加到动态添加的元素

我相信罪魁祸首是在按钮事件处理程序（$("#btn" + i).click(function()），但我不知道。我已经通过它并点击了，无论按下哪个按钮，i的值都是2。

我该如何完成我正在寻找的行为？ jQuery不是必需的，但我碰巧使用的是。

<html> 
<head> 
<script type='text/javascript'> 
var foo = { 
    "foo": [ 
     { 
      "title":"bar", 
      "id":7826 
     }, 
     { 
      "title":"baz", 
      "id":7198 
     }, 
     { 
      "title":"whizbang", 
      "id":7119 
     } 
    ] 
}; 
</script> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script> 
<script type='text/javascript'> 
$(document).ready(function() { 
    for (i in foo.foo) { 
     $("#content").append("<button type='button' id='btn" + i + "'>" + foo.foo[i].title + "</button>"); 
     $("#btn" + i).click(function() { 
      $("#result").append("<p>Title:" + foo.foo[i].title + ", ID:" + foo.foo[i].id + "</p>"); 
     }); 
    } 
}); 

</script> 
</head> 
<body> 
    <div id='content' /> 
    <div id='result' /> 
</body> 
</html>

来源

2014-07-08 jdphenix

为什么不向他们添加一个类并编写一个类选择器的事件 –

您不应该使用in循环遍历数组。使用forEach方法或循环的条件增量。 – SimpleJ

@SimpleJ感谢关于'forEach'的提示，它完全符合我的需求，如果你想写一个简单的答案，我会接受它 – jdphenix

fiddle showing this solution working

$(document).ready(function() { 
    for (var i = 0; i < foo.foo.length; i++) { 
     $("#content").append("<button type='button' class='btn' data-btnid='"+i+"'>" + foo.foo[i].title + "</button>"); 
    } 

    $("#content").on("click", ".btn", function() { 
     var btnid = $(this).attr("data-btnid"); 
     $("#result").append("<p>Title:" + foo.foo[btnid].title + ", ID:" + foo.foo[btnid].id + "</p>"); 
    }); 
});

像其他人说，你应该改变你的循环。除此之外，这些都是我所做的更改：

你所有的按钮具有相同的行为，所以给他们同样的类，而不是一个ID
把按钮的ID在自定义属性（data-btnid）。自定义属性以data-开头。
对于实际获取您想要的行为，您必须动态绑定单击事件。基本上你使用一个选择器来获得父母，在你的情况下它是$("#content")，并将一个点击事件绑定到类btn的孩子。然后它访问被点击的自定义属性data-btnid的按钮以获取数组中信息索引的id。

来源

2014-07-08 16:53:04 Shmoopy

也许这里是需要保存的VaR值，我的每一次迭代，例如，在封闭：你通过在点击论据功能（..）的包装函数通过这种方式：

$(document).ready(function() { 
    for (i in foo.foo) { 
     $("#content").append("<button type='button' id='btn" + i + "'>" + foo.foo[i].title + "</button>"); 
     $("#btn" + i).click((function(i){ 
      function() { 
       $("#result").append("<p>Title:" + foo.foo[i].title + ", ID:" + foo.foo[i].id + "</p>"); 
      } 
     })(i)); 
    } 
});

来源

2014-07-08 16:49:23 weeklyTea

将事件处理程序添加到动态添加的元素

回答

相关问题