使用 jQuery .on 与使用 .live？

Question

简单的问题，因为 1.7 版本的 jQuery .live() 已被弃用，取而代之的是 .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);

但是代码效率会低一些，试着用它来展示一下它是如何工作的。

---

注意事项：

1. 我希望您没有多个元素具有相同的 id，因为它是无效标记。
2. 看起来listitem 是您代码中的静态元素。

更新：

也许这是我的问题 - 我刚刚将 .live 替换为 .on

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

阅读每个函数的文档：

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());
});