Ajax加載後數字，懸停（等）效果不起作用更多

Question

我正在使用Drupal 7並通過頁面上的View模塊獲取我的內容。和我的傳呼機視圖加載更多的模塊。和我的縮略圖效果懸停，陰影等圖像懸停使用此代碼：

var hoverImg = '<div class="hoverimg"></div>'; 

$(".thumb").each(function(){ 
    $(this).children("div").each(function(){ 
     $(this).find("a").append(hoverImg); 
    }); 
}); 

$(".thumb div").hover(function() { 
    $(this).find(".hoverimg").animate({ opacity: 'toggle' }); 
}); 

$(".thumb").hover(function() { 
    $(this).find("div").each(function(){ 
     $(this).find(".shadow").fadeOut(500); 
    }); 
}); 

並獲取當前的縮略圖號碼。此代碼：

var c = ''; 
var d = ''; 
$('.view-content div.views-row').each(function(){ 
    c = 0; 
    d = 0; 
    var i = 1; 
    d = $(this).find('.thumbimg').length; 
    $(this).find('.thumbimg').each(function(){ 
     sayi=i++; 
     $(this).append('<div class="img_no">0'+sayi+'</div>'); 
    }); 
}); 

一切都還好。所有對起始頁面的影響。但是當點擊加載更多按鈕時，我的效果無法在另一個頁面上工作。

我該如何解決這個問題？謝謝。

Answer 1

停止工作的原因是由於懸停功能（和其他腳本/函數）僅適用於現有元素。所以如果你用ajax添加一些東西，它不會適用於那個，除非你在ajax加載後重新加載腳本。

另一種選擇是使用live（）或on（）（用於懸停部分，On是新版本的live，添加在jQuery 1.7中）。 直播並監聽任何現有的或未來的元素。

一個活生生的劇本會是這個樣子：

  $(".yourElement").live({ 
       mouseenter: 
       function() { 
        // Do something 
       }, 
       mouseleave: 
       function() { 
        // Do something 
       }, 
       mousemove: 
       function() { 
        // Do something 
       } 
      });