jquery事件没有'；不适用于附加元素

我有这个网站

如您所见，“图像”和“Web模板”选项卡上有一个小小的图像滑块，图像从右向左滑动，然后消失，然后出现在父元素的最末端（在我的例子中是一个

）

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

到目前为止还不错

但是如果您等到第一个图像再次出现时，悬停事件就不再起作用了

---

jquery可能看不到

标记末尾的新附加元素

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

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

这会将EventHandler添加到所有类为“box\u body”的img标记中，但稍后附加的标记将不会获得该事件

试试这个：

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

这会将事件添加到文档中，并且仅当eventtarget是img且class=“box\u body”为时才会激发该事件。由于事件向上传播，只要在事件到达文档之前（通过调用“event.stopPropagation（）”），中间没有任何东西会阻止它，这应该可以工作

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

请注意，您可以使用委托完成相同的任务（如果启用不可用）：

---

您需要使用jQuery的.live（）函数，以便将事件处理程序附加到将来创建的元素。这是文件： 以下是用法：

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

---

那里的一些代码将是有用的

是否从起始处删除项目，然后将其插入滑块的末尾

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

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

而不是

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

---

请查看更多信息。

我强烈建议您使用它，它将帮助您处理javascript中新添加的元素。使用的一个例子是：

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

我在使用

.on（）

时遇到了几个问题，因为它只会将事件绑定到项目一次（例如，在文档准备就绪之后）

---

希望有帮助。

在您的

script.js

中，在此处更改文件

第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中已经得到了多次回答。搜索并找到一个好答案。像

---

请在此处发布相关代码，不要让我们访问其他网站，也不要费力浏览源代码。更好的是，在jsfiddle.net上发布一个示例。此FAQ部分和包含此问题答案的部分之前的部分。哦，天哪，我已经有一段时间没有重新查看该文档了-看起来他们将其更改为。on（）

$。live

现在已贬值，请尝试使用

$。on

代替。谢谢您抽出时间。我使用“委托”代替“on”。到目前为止，“委托”很好。

$。委托

只是

$的包装。on

现在。检查这里你是完全正确的。这意味着“开”更好，因为它更短。我不想使用任何额外的库

$(".box_body img").hover(function(){
            var src=$(this).attr("src");
            var target=$(this).parents("table").attr("id").split("_").pop();
            $("#preview_"+target).attr({src:src});
})

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