jQuery事件不适用于添加的元素

Question

我有一个网站在这里，你可以看到一个名为“Images”和“Web Templates”的小图像滑块，其中图像从右向左滑动，然后消失，最后出现在父元素的末尾（在我这里是<tr>）。

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

到目前为止还不错。

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

可能是因为jquery看不到添加到<tr>标签末尾的新元素吗？

- Ionel Lupu

---

请在此处发布相关代码，不要让我们访问其他网站并浏览源代码。更好的做法是在jsfiddle.net上发布一个示例。 - j08691

这个FAQ部分和它之前的部分包含了这个问题的答案。http://docs.jquery.com/Frequently_Asked_Questions#Why_doesn.27t_an_event_work_on_a_new_element_I.27ve_created.3F - Kevin B

Answer 1

您绑定事件的方式对于动态添加的元素是不起作用的。在preview_script.js中，您有以下代码：

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

这将为所有class为“box_body”的img标签添加事件处理程序，但后面添加的标签将不会获得该事件。

尝试这个:

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

这将在文档中添加事件，并仅在事件目标为class =“box_body”的img时触发它。由于事件向上传播，只要在到达文档之前没有任何中间停止它（通过调用“event.stopPropagation（）”），它就会正常工作。

如果您知道“.box_body img”的父元素，可以将document替换为该元素，这样会更好一些，因为您不必等待事件传播到文档。

请注意，如果on不可用，则可以使用委托来完成相同的事情：

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

- Porco

Answer 2

您需要使用 jQuery 的 .live() 函数来绑定事件处理器到未来创建的元素。以下是文档链接：http://api.jquery.com/live/，以下是用法示例：

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

- solidau

---

哦，我的天啊，我已经有一段时间没有重新查看文档了——看起来他们将其更改为.on()。 - solidau

现在$.live已经被弃用，请尝试使用$.on代替。 - Prasenjit Kumar Nag

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

这个问题在 Stack Overflow 上已经被回答过很多次了。请搜索并找到一个好的答案，例如：

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

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

jQuery 绑定事件到动态加载的 HTML 元素

- Prasenjit Kumar Nag

---

谢谢您的时间。我使用“delegate”代替“on”，目前效果不错。 - Ionel Lupu

$.delegate现在只是$.on的一个包装器。请在此处查看https://github.com/jquery/jquery/blob/master/src/event.js#L996 - Prasenjit Kumar Nag

你是完全正确的。这意味着“on”更好，因为它更短。 - Ionel Lupu

Answer 4

有些代码可能会很有用。

你是从开头删除项目，然后将它们插入滑块的末尾吗？

如果答案是“是”，那么你应该使用

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

替代

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

请查看http://api.jquery.com/delegate/以获取更多信息。

- Kasyx

Answer 5

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

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

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

希望这可以帮助到你。

- KoU_warch

---

我不想使用任何额外的库。 - Ionel Lupu