如何在通过 Ajax 拉入的元素上使用 Jquery document.on()？答案

【问题标题】：How to use Jquery document.on() on elements that are pulled in via Ajax?如何在通过 Ajax 拉入的元素上使用 Jquery document.on()？
【发布时间】：2012-06-02 18:01:37
【问题描述】：

我有一个 Jquery Mobile shell 页面，我正在使用 Ajax 将表单加载到该页面中。该表单有一些复选框，我需要绑定到这些复选框。

奇怪的是，我可以像这样直接在按钮上设置监听器：

$('input[name="ohneiln"]').on('change', function() {
   alert("hello");
   });

但是当我尝试将监听器设置为 $(document) 并委托给 checkbox 时，监听器永远不会触发：

$(document).on('change', 'input[name="ohneiln"]', function() {
   alert("hello");
});

问题：
使用$(document).on() 为通过 Ajax 加载的“动态”元素设置事件绑定的正确方法是什么？这对于change 事件是不可能的，或者我为什么会遇到麻烦？

感谢您的帮助！

【问题讨论】：

您的第二个语法似乎很好，应该适用于动态元素，问题可能出在其他地方。
工作正常jsfiddle.net/7rDDA
@Esailija - 但是当页面加载时您的输入就在那里。我的不是，它是在用户做一些事情后通过 Ajax 拉进来的
@frequent：适用于我通过 AJAX 加载的输入。 jsfiddle.net/7rDDA/1
@frequent 和你的第二个代码是那些元素，通过 ajax 拉

标签： jquery-mobile jquery

【解决方案1】：

.on() 方法的工作方式会根据您的使用方式而有所不同。在您的第一个示例中，.on() 方法的行为类似于bind，并且仅适用于已存在的元素。

第二个例子在很多方面表现得像.live() 或delegate()。并且适用于稍后添加的元素。

阅读文档以获取详细说明http://api.jquery.com/on/

【讨论】：

感谢您的链接和解释。猜猜我会坚持使用第一个版本。
我认为你把第一个和第二个例子弄混了。第一个是“直接”，第二个是“委托”。
我想知道操作是否像我解释的那样混淆了。也许这就是为什么我的解释是有道理的哈哈。我更正了解释。
而不是 $(document)，您难道不想将 .on 附加到最近的父 ID 以提高性能吗？