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() {..});

这会将事件添加到文档中,并且只有在事件目标是img with class ="box_body"时才会触发它.由于事件向上传播,只要它之间没有任何内容在它到达文档之前就停止它(通过调用"event.stopPropagation()")

如果您知道".box_body img"的PARENT,您可以用它替换文档,这将更好一些,因为您不必等待事件传播到文档.

请注意,您可以使用委托完成相同的操作(如果on不可用):

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