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