Question

我有这个网站here

正如您所看到的，“图像”和“Web模板”选项卡上有一个微小的图像滑块，图像从右向左滑动，然后消失，然后它出现在父元素的最后（{在我的情况下{1}}。

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

到目前为止一切顺利。

但是如果你等到第一张图像再次出现，那么悬停事件将不再起作用。

jquery可能无法在<tr>标记的末尾看到新的附加元素？

Answer 1

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

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

这会将事件处理程序添加到具有类“box_body”的所有img标记中，但稍后附加的标记将不会获得该事件。

试试这个：

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

这会将事件添加到document，并且只有在eventtarget是img with class =“box_body”时才会触发它。由于事件向上传播，只要两者之间没有任何东西在它到达文档之前就停止它（通过调用“event.stopPropagation（）”）

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

请注意，您可以使用委托完成相同的操作（如果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中得到了多次回答。搜索并找到一个好的答案。像

Event binding on dynamically created elements?

In jQuery, how to attach events to dynamic html elements?

jquery binding events to dynamically loaded html elements

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()遇到了几个问题，因为它只会将事件绑定到项目一次（例如，在文档准备好之后）。

希望它有所帮助。

jquery事件不适用于附加元素

5 个答案: