对于在事件声明之后添加的元素，使用什么代替 .live() (jQuery v1.9)

Question

可能的重复项：
jquery： on vs live

当我通过javascript动态创建对象时，我曾经使用.live（）方法，因为例如，当我将事件侦听器声明为单击时，该元素尚未在DOM中，因此当元素由用户操作动态添加时，.live（'click'）方法就可以了。

但是，在 jQuery v1.9.0 中，没有实时方法，文档建议改用 .on（），但这在这种示例中不起作用......

这里有一个例子：http://jsfiddle.net/promatik/C3DLQ/。

只有将 jQuery 设置为 1.8.3 或迁移插件，它才会起作用。

$("#create").click(function(){
    $('body').append($('<div id="test" class="btn">click me<div>'));
});
$("#test").on("click", function(){
    alert("worked!"); 
});

我实际上测试了其他方法，如delegate（）和bind（），但没有一个有效。

Answer 1

它不起作用的原因是 JavaScript 第一次运行时test不存在。 如果将 on 事件附加到父元素并将其筛选为 #test ，则它将按预期工作。

$("body").on("click", "#test", function(){
    alert("worked!"); 
});

更新的小提琴：http://jsfiddle.net/C3DLQ/4/

Answer 2

您可以将其附加到文档并指定选择器，如下所示：

$(document).on("click", "#test", function(){
    alert("worked!"); 
});

初始选择器查询时未返回 #test 元素，因此未附加任何事件。将其附加到 document 元素并指定要使用的选择器将使它在将新元素添加到 DOM 时正常工作。

Answer 3

它不起作用的原因是因为你使用了一个 ID 的多个实例。

$('#create').click(function() {
    $('body').append($('<div class="btn test">click me<div>'));
});

您还需要将单击绑定到文档并过滤元素以.test，如下所示。

$(document).on('click', '.test', function() {
    alert('worked!'); 
});