为什么 jQuery 的事件处理程序不能处理更改的 DOM 元素？答案

【问题标题】：Why don't jQuery's event handlers work with changed DOM elements?为什么 jQuery 的事件处理程序不能处理更改的 DOM 元素？
【发布时间】：2009-05-08 20:46:23
【问题描述】：

在我的应用程序中，我有一个下拉表单，它会触发 AJAX 请求 onchange 并返回选定的用户名值以及旁边的“删除”图像。

<div id="el">User Name <img src="ico/del.gif" onclick="ajax_delete(12)" class="del" /></div>

奇怪的是，如果页面是第一次加载，下面的 jQuery 代码会正确执行，并且鼠标指针会在所有 .del 图像上发生变化：

$("img.del").css('cursor', 'pointer');

但是，如果上面的 html 代码是这样由 AJAX 请求添加的：

$("#el").html('User Name <img src="ico/del.gif" onclick="ajax_delete(12)" class="del" />');

鼠标指针变化不适用于 AJAX 请求添加的图像。

有什么线索吗？

【问题讨论】：

问题标题具有误导性。 jQuery 确实支持带有修改的事件处理程序。但是您给出的示例没有使用事件处理程序，它只是修改了文档。

标签： jquery ajax

【解决方案1】：

在您运行 css 函数时该元素不存在。将 css 函数附加到 DOM 后，您必须运行它。

From the live documentation:

.live 不支持 liveQuery 的无事件样式回调提供。只有事件处理程序可以与.live绑定。

您需要使用liveQuery plug-in 来完成此操作。

从那里开始非常简单：

$('#el').livequery(function() {
  $(this).css('background', 'green');
});

请注意，liveQuery 也可以通过使用第二个参数来触发已删除或不再匹配的元素（例如，如果您基于值比较进行匹配）：

unmatchedFn 在元素改变且不再存在时触发匹配或从 DOM 中删除。

不错。

【讨论】：

【解决方案2】：

$("img.del") 返回一个包含所有文档中当前图像的选择集，其中 ClassName 等于 del。在调用该命令之后插入一个新元素。因此您需要使用live events

【讨论】：

实时文档的文档指定它仅适用于事件（单击等），请参阅文档。

【解决方案3】：

您需要使用现场活动。

http://docs.jquery.com/Events/live

当您使用普通方法绑定事件时，它们仅绑定到现有项目。此后在 DOM 上创建的任何项目均不受影响。

【讨论】：

实时文档的文档指定它仅适用于事件（单击等），请参阅文档。

【解决方案4】：

也许 live() 处理程序会帮助你。在文档中阅读它。

【讨论】：