Question

简单的问题，因为jQuery .live（）的1.7版本已被弃用，而有利于.on（）;但.on（）似乎不适用于通过JavaScript呈现并加载到DOM中的元素。所以我的问题是，是否应该使用.live（）或.on（）如何捕获这些新生成的元素？

举个例子，这是我的代码：

$("#listitem").append("<li id='removeitem'>" + 
       formdata + ' <a href="#">Remove</a></li>');

当我尝试通过.on（）操作这个元素时 - 结果什么都没有，而.live（）能够抓住这个元素。

$("#removeitem").live("click", function(event) { alert($(this).text()); });

Answer 1

live版本：

$("#removeitem").live("click", function(event) { alert($(this).text()); });

应更改为：

$("#containerId").on("click", "#removeitem", function(event) { 
    alert($(this).text()); 
});

containerId是加载removeitem的静态元素。

您只需使用body作为静态元素：

$("body").on('click', '#removeitem'm fn);

但代码的效率会降低，只需尝试使用它来展示它是如何工作的。

备注：

我希望您没有多个具有相同id的元素，因为它是无效的标记。

看起来listitem是代码中的静态元素。

<强>更新

也许那是我的问题 - 我只是用.on
替换了.live

你不能简单地替换它们......它们以其他方式工作，并且具有不同的参数！

阅读每个功能的文档：

on：

.on(events [, selector] [, data], handler(eventObject))

live:

.live( events, handler(eventObject) )

Answer 2

您应该尝试.on()这样：

$('#listitem').on('click', '#removeitem', function() {
    alert($(this).text());
});

<强> DEMO

如果您没有removeitem这样的固定ID，如果其结构如removeitem1，removeitem1等，请尝试：

$('#listitem').on('click', '[id^=removeitem]', function() {
    alert($(this).text());
});

使用jQuery .on与使用.live？

2 个答案: