jquery 事件不适用于 append 元素

Question

我有这个网站 here

正如您所看到的，“图像”和“Web 模板”选项卡有一个微小的图像 slider ，其中图像从右向左滑动，然后消失，然后出现在父元素的最末尾(<tr>就我而言)。

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

到目前为止一切顺利。

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

jquery 有可能看不到 <tr> 标记末尾的新 append 元素吗？

Answer 1

绑定(bind)事件的方式不适用于动态添加的元素。在 Preview_script.js 中，您有:

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

这会将事件处理程序添加到类为“box_body”的所有 img 标签中，但稍后 append 的事件处理程序将不会获取该事件。

试试这个:

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

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

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

请注意，您可以使用委托(delegate)完成同样的事情(如果 on 不可用):

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