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

Question

在我的应用程序中,我有一个下拉表单,它在onchange上触发一个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后,必须运行它.

从实时文档:

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

您需要使用liveQuery插件来完成此任务.

从那里开始非常简单:

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

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

当元素更改并且不再与DOM匹配或从DOM中删除时,将触发unmatchedFn.

尼斯.