jQuery - 动态生成的孩子不会触发点击[重复]答案

【问题标题】：jQuery - dynamically generated children dont trigger click [duplicate]jQuery - 动态生成的孩子不会触发点击[重复]
【发布时间】：2013-02-01 15:56:58
【问题描述】：

我的代码：

$(".test1").children().click(function(){
    $(".test2").append('<span>something</span>');           
});

$(".test2").children().on('click', function(){
    alert("done");      
});

单击 test1 的子项后，带有“something”的跨度应该是 test2 的最后一个子项。我的追加做对了吗？ test2 上的点击事件是否正确完成？

谢谢！

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

这行得通：

$(".test1").children().click(function(){
    $(".test2").append('<span> something</span>');           
});

$(".test2").on('click', 'span', function(){
    alert("done");      
});

live demo

【讨论】：

thx，这行得通！但有没有办法让点击触发即使 test2 的孩子不是跨度？

【解决方案2】：

好的，只是对您的追加的一点解释，您的追加是正确的，但是您在追加新的孩子之前将点击事件附加到$(".test2").children()（点击了test1）。所以点击事件永远不会附加到跨度。

【讨论】：

我点击 test1 后点击 test2 jsut
是的，但在这种情况下，您在单击之前分配了事件处理程序。当分配事件处理程序时，您会看到新的孩子不在那里。 .children() 表示当时的孩子。这就是为什么$(".test2").on 起作用的原因，处理程序设置在父级上，'span' 是过滤器，所以如果你想让它适用于跨度以外的东西，你应该更改过滤器。