我有这个网站here
如您所见，“图像”和“Web 模板”选项卡有一个小图像滑块，其中图像从右向左滑动，然后消失，然后出现在父元素的最末端（@ 987654323@ 在我的情况下）。
如果您将鼠标悬停在小图像上，您可以在左侧看到它的预览。
到目前为止一切顺利。
但是如果你等到第一张图片再次出现，悬停事件就不再起作用了。
jquery 可能看不到<tr> 标记末尾的新附加元素？
【问题讨论】：
标签： jquery image events append
您绑定事件的方式不适用于动态添加的元素。在 preview_script.js 你有：
$(".box_body img").hover(function(){
这将为所有带有“box_body”类的 img 标签添加事件处理程序，但稍后附加的将不会获得该事件。
试试这个：
$(document).on("hover", ".box_body img", function() {..});
这会将事件添加到文档中，并且仅当 eventtarget 为 img 且 class= "box_body" 时才会触发它。由于事件向上传播，只要在它到达文档之前没有任何东西阻止它（通过调用“event.stopPropagation()”）
如果您知道“.box_body img”的父级，您可以用它替换文档，这样会更好一些，因为您不必等待事件传播到文档。
请注意，您可以使用委托完成同样的事情（如果 on 不可用）：
$(document).delegate(".box_body img", "hover", function() {..});
【讨论】：
您将需要使用 jQuery 的 .live() 函数来将事件处理程序附加到将要创建的元素上。这是文档：http://api.jquery.com/live/ 用法如下：
$(".dynamicButtons").live("hover", function() {
//do stuffs
});
【讨论】：
$.live 现在已被贬值，请尝试改用$.on。
在您的script.js 更改文件中http://web-art.netau.net/script.js
$(".box_body img").hover(function(){
var src=$(this).attr("src");
var target=$(this).parents("table").attr("id").split("_").pop();
$("#preview_"+target).attr({src:src});
})
第 112 到 116 行到以下
$(document).on('mouseenter',".box_body img",function(){
var src=$(this).attr("src");
var target=$(this).parents("table").attr("id").split("_").pop();
$("#preview_"+target).attr({src:src});
});
这背后的原因已在 SO 中多次回答。搜索并找到一个好的答案。喜欢
Event binding on dynamically created elements?
【讨论】：
$.delegate 现在只是 $.on 的包装。在这里查看github.com/jquery/jquery/blob/master/src/event.js#L996
一些代码会有用。
您是从头开始删除项目，然后在滑块末尾插入它们吗？
如果答案是“是”，你应该使用
$('selector').delegate('subselector', 'hover', function() {
//your code there
});
而不是
$('selector subselector').hover( function() {
//your code there
});
更多信息请查看http://api.jquery.com/delegate/。
【讨论】：
我强烈建议您使用livequery，这将帮助您处理 javascript 中新添加的元素。使用示例如下：
$('.elementAdded').livequery('event',function(){
//do stuff
})
我在使用 .on() 时遇到了几个问题，因为它只会将事件绑定到项目一次（例如在文档准备好之后）。
希望对你有帮助。
【讨论】：