1

可能重复：
jquery：on vs live

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

但是，在 jQuery v1.9.0 中，没有 live 方法，文档建议使用.on()代替，但这在这种示例中不起作用......

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

仅当您将 jQuery 设置为 1.8.3 或 Migrate 插件时，它才会起作用。

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

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

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

4

3 回答 3

3

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

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

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

于 2013-01-24T02:42:28.903 回答
2

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

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

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

于 2013-01-24T02:40:35.280 回答
1

它不起作用的原因是因为您正在使用一个 ID 的多个实例。选择多个元素时，请改用类。

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

您还需要将单击绑定到文档并过滤元素以使其.test喜欢。

$(document).on('click', '.test', function() {
    alert('worked!'); 
});
于 2013-01-24T02:41:01.840 回答