ロード後にjQueryエフェクトが機能しないmore

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

すべては問題ありません。開始ページのすべてのエフェクト。しかし、Load Moreボタンをクリックすると、私のエフェクトは別のページで動作しません。

私の見解は、より多くの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に更新し、$ .hover（）の代わりに$ .on（）を使用します。$ .on（）を使用すると、基本的にはハンドラを各要素に個別にアタッチする必要があります。そのように、添付セレクタ、およびあなたの.thumbとして、あなたの一次容器を使用して、トリガセレクタとしてIMGセレクタを.thumb：$ .onは、既存の永続的なDOM要素にアタッチして、イベントをするためにリッスン

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

指定されたセレクタに一致する子要素でトリガされます。ページのレンダリング時にページに存在しないオブジェクトにイベントリスナーをアタッチすると機能しません。 .live（）はjQuery 1.7.xでは非推奨です。