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

我实际上测试了其他方法，例如委托（）和 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!'); 
});

对事件声明后添加的元素（jQuery v1.9）使用什么代替.live（）

3 个答案: