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

Question

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

<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请求添加的图像。

有什么线索？

Answer 1

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

From the live documentation:

  

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

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

从那里开始非常简单：

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

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

  

当元素发生变化且不再发生时，会触发unmatchedFn   匹配或从DOM中删除。

尼斯。

Answer 2

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

Answer 3

您需要使用直播活动。

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

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

Answer 4

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