jQuery特效加載後無法正常工作

Question

我使用Drupal 7並在頁面上使用View模塊獲取我的內容。和我的傳呼機模塊Views Load More。和我的縮略圖效果懸停，陰影等圖像懸停使用此代碼：

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

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

我的視圖加載更多的js代碼：

/** 
* @file views_load_more.js 
* 
* Handles the AJAX pager for the view_load_more plugin. 
*/ 
(function ($) { 

    /** 
    * Provide a series of commands that the server can request the client perform. 
    */ 
    Drupal.ajax.prototype.commands.viewsLoadMoreAppend = function (ajax, response, status) { 
    // Get information from the response. If it is not there, default to 
    // our presets. 
    var wrapper = response.selector ? $(response.selector) : $(ajax.wrapper); 
    var method = response.method || ajax.method; 
    var effect = ajax.getEffect(response); 

    // We don't know what response.data contains: it might be a string of text 
    // without HTML, so don't rely on jQuery correctly iterpreting 
    // $(response.data) as new HTML rather than a CSS selector. Also, if 
    // response.data contains top-level text nodes, they get lost with either 
    // $(response.data) or $('<div></div>').replaceWith(response.data). 
    var new_content_wrapped = $('<div></div>').html(response.data); 
    var new_content = new_content_wrapped.contents(); 

    // For legacy reasons, the effects processing code assumes that new_content 
    // consists of a single top-level element. Also, it has not been 
    // sufficiently tested whether attachBehaviors() can be successfully called 
    // with a context object that includes top-level text nodes. However, to 
    // give developers full control of the HTML appearing in the page, and to 
    // enable Ajax content to be inserted in places where DIV elements are not 
    // allowed (e.g., within TABLE, TR, and SPAN parents), we check if the new 
    // content satisfies the requirement of a single top-level element, and 
    // only use the container DIV created above when it doesn't. For more 
    // information, please see http://drupal.org/node/736066. 
    if (new_content.length != 1 || new_content.get(0).nodeType != 1) { 
     new_content = new_content_wrapped; 
    } 
    // If removing content from the wrapper, detach behaviors first. 
    var settings = response.settings || ajax.settings || Drupal.settings; 
    Drupal.detachBehaviors(wrapper, settings); 
    if ($.waypoints != undefined) { 
     $.waypoints('refresh'); 
    } 

    // Set up our default query options. This is for advance users that might 
    // change there views layout classes. This allows them to write there own 
    // jquery selector to replace the content with. 
    var content_query = response.options.content || '.view-content'; 

    // If we're using any effects. Hide the new content before adding it to the DOM. 
    if (effect.showEffect != 'show') { 
     new_content.find(content_query).children().hide(); 
    } 

    // Add the new content to the page. 
    wrapper.find('.pager a').remove(); 
    wrapper.find('.pager').parent('.item-list').html(new_content.find('.pager')); 
    wrapper.find(content_query)[method](new_content.find(content_query).children()); 
    if (effect.showEffect != 'show') { 
     wrapper.find(content_query).children(':not(:visible)')[effect.showEffect](effect.showSpeed); 
    } 

    // Attach all JavaScript behaviors to the new content 
    // Remove the Jquery once Class, TODO: There needs to be a better 
    // way of doing this, look at .removeOnce() :-/ 
    var classes = wrapper.attr('class'); 
    var onceClass = classes.match(/jquery-once-[0-9]*-[a-z]*/); 
    wrapper.removeClass(onceClass[0]); 
    var settings = response.settings || ajax.settings || Drupal.settings; 
    Drupal.attachBehaviors(wrapper, settings); 
    } 

    /** 
    * Attaches the AJAX behavior to Views Load More waypoint support. 
    */ 
    Drupal.behaviors.ViewsLoadMore = { 
    attach: function (context, settings) { 
     if (settings && settings.viewsLoadMore && settings.views.ajaxViews) { 
     opts = { 
      offset: '100%' 
     }; 
     $.each(settings.viewsLoadMore, function(i, setting) { 
      var view = '.view-id-' + setting.view_name + '.view-display-id-' + setting.view_display_id + ' .pager-next a'; 
      $(view).waypoint(function(event, direction) { 
      $(view).waypoint('remove'); 
      $(view).click(); 
      }, opts); 
     }); 
     } 
    }, 
    detach: function (context, settings, trigger) { 
     if (settings && Drupal.settings.viewsLoadMore && settings.views.ajaxViews) { 
     $.each(settings.viewsLoadMore, function(i, setting) { 
      var view = '.view-id-' + setting.view_name + '.view-display-id-' + setting.view_display_id + ' .pager-next a'; 
      $(view, context).waypoint('destroy'); 
     }); 
     } 
    } 
    }; 
})(jQuery); 

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

Answer 1

更新您的jQuery到1.7.1或1.7.2，並使用$ .on（）而不是$ .hover（） - with $ .on（），基本上給它一個沒有需要將處理程序單獨附加到每個元素。使用您的主容器作爲附加選擇，和你的.thumb和.thumb IMG選擇爲您的觸發選擇，就像這樣：

$('#main').on('hover', '.thumb', function() { 
    // do your hover stuff 
} 

$。對附加到現有的永久DOM元素並監聽事件是在與提供的選擇器匹配的子元素上觸發。在頁面呈現時將任何事件偵聽器附加到頁面中不存在的對象將不起作用。而.live（）在jQuery 1.7.x中已棄用。