jquery - jquery 事件不适用于附加元素

Question

我这里有这个网站

如您所见，“图像”和“Web 模板”选项卡有一个小图像滑块，其中图像从右向左滑动，然后消失，然后出现在父元素的最末端（<tr>在我的情况下） .

如果您将鼠标悬停在小图像上，您可以在左侧看到它的预览。

到目前为止，一切都很好。

但是如果你等到第一张图片再次出现，悬停事件就不再起作用了。

jquery有可能在<tr>标签末尾看不到新的附加元素吗？

Answer 1

您绑定事件的方式不适用于动态添加的元素。在 preview_script.js 你有：

$(".box_body img").hover(function(){

这将为所有带有“box_body”类的 img 标签添加事件处理程序，但稍后附加的那些将不会获得该事件。

尝试这个：

$(document).on("hover", ".box_body img", function() {..});

这会将事件添加到文档中，并且仅当 eventtarget 是带有 class = "box_body" 的 img 时才会触发它。由于事件向上传播，只要在它到达文档之前没有任何东西阻止它（通过调用“event.stopPropagation（）”），它就应该起作用

如果您知道“.box_body img”的父级，则可以用它替换文档，这会更好一些，因为您不必等待事件传播到文档。

请注意，您可以使用委托完成同样的事情（如果 on 不可用）：

$(document).delegate(".box_body img", "hover", function() {..});

Answer 2

您将需要使用 jQuery 的 .live() 函数来将事件处理程序附加到将要创建的元素上。这是文档：http ://api.jquery.com/live/ 这里的用法：

$(".dynamicButtons").live("hover", function() {
    //do stuffs
});

Answer 3

在您的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 中多次回答。搜索并找到一个好的答案。喜欢

动态创建元素的事件绑定？

在 jQuery 中，如何将事件附加到动态 html 元素？

jquery绑定事件到动态加载的html元素

Answer 4

那里的一些代码会有用。

您是否从头开始删除项目，然后在滑块的末尾插入它们？

如果答案是“是”，您应该使用

$('selector').delegate('subselector', 'hover', function() {
    //your code there
});

代替

$('selector subselector').hover( function() {
    //your code there
});

请查看http://api.jquery.com/delegate/了解更多信息。

Answer 5

我强烈建议您使用livequery，这将帮助您与 javascript 中新添加的元素相处。一个使用示例是：

 $('.elementAdded').livequery('event',function(){
    //do stuff
 })

我使用时遇到了几个问题，.on()因为它只会将事件绑定到项目一次（例如在文档准备好之后）。

希望能帮助到你。