jQuery的事件不會爲附加元素

Question

我有這個網站here

工作正如你可以看到有「影像」和「網頁模板」選項卡，其中圖像由右至左滑動一個微小的圖像滑塊，然後消失，然後它出現在父元素的最後（在我的情況下爲<tr>）。

如果您將鼠標懸停在小圖片上，您可以看到它在左側預覽。

到目前爲止這麼好。

但是，如果您等到第一張圖像再次出現，則懸停事件不再有效。

jquery可能無法在<tr>標籤末尾看到新的附加元素？

Answer 1

綁定事件的方式對於動態添加的元素不起作用。在preview_script.js您有：

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

這將事件處理器添加到所有的img標籤帶班「box_body」，但那些在後面追加不會得到該事件。

試試這個：

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

這將增加該事件記錄，只有火，如果該事件目標是IMG帶class =「box_body」。由於事件傳播了這應該工作，只要它之間沒有任何東西停止之前，它到達文檔（通過調用「event.stopPropagation（）」）

如果您知道「.box_body img」的父項，您可以將文檔替換爲這樣會更好一些，因爲您不必等待事件傳播到文檔。

注意，您可以使用完成委託同樣的事情（如果不可用）：

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

Answer 2

您將要使用jQuery的.live（）函數，以便將事件處理程序附加到元素這將在未來創建。這裏的DOC：http://api.jquery.com/live/ 這裏的用法：

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

Answer 3

一些代碼會有有用。

您是從開始刪除項目，然後將它們插入到滑塊的末尾？

如果答案是 「是」，你應該使用的

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

代替

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

請檢查http://api.jquery.com/delegate/更多信息。

Answer 4

我強烈建議您使用livequery這將幫助您與新添加的元素相處javascript。使用的一個例子是：

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

我不得不使用.on()，因爲它會約束事件的項目只有一次（文件準備好後，例如）的幾個問題。

希望它有幫助。

Answer 5

在這裏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的script.js更改文件到這背後的以下

$(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