Нечетное поведение toggleClass после бесконечной загрузки прокрутки и кладки

Question

Имейте toggleClass на клик, который отлично работает для содержимого, загруженного до бесконечного прокрутки, и отлично работает над содержимым, добавленным к кладке после бесконечного прокрутки, но больше не будет работать с ранее загруженным контентом.

Например // страница загружается

<article></article> 
<article></article> 
<article></article> 

(Toggle Class отлично работает на всех перечисленных выше элементов статьи) , но затем добавить бесконечный свиток и прилагаемыми кладочных нагрузка больше элементов статьи

<article></article> 
<article></article> 
<article></article> 

(toggleClass отлично работает с последним загруженным контентом, но не с элементами статьи из загрузки страницы.) Если сделать в третий раз,

<article></article> 
<article></article> 
<article></article> 

(toggleClass работает на выше, и начальная страница загружена элементы статьи, но не элементы в середине, которые были первые элементы, загруженные из бесконечной прокрутки)

Я добавление и удаление идентификатора, элемент так что ScrollTo работает, и, похоже, все время работает нормально. Итак, есть что-то с помощью toggleClass().

Вот код в файле .js.

jQuery(window).load(function() { 
    /** 
    Add ID to Genesis main.content 
    */ 
    jQuery('main.content').attr('id', 'grid'); 

    /** 
     Adding div and class grid-sizer - utility element for Masonry to size correctly 
    */ 
    jQuery('main#grid article:first-of-type').before('<div class="grid-sizer"></div>'); 

    /** 
     Initialize Masonry 
    */ 

    var $container = $('#grid'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      "itemSelector": "article", 
      "columnWidth": ".grid-sizer", 
      "animation": "true", 
      "isResizable": "true", 
     }); 
    }); 

    activeArticle(); 

}); 

function activeArticle() { 

    jQuery('article .entry-content a').click(function(event) { 

     event.preventDefault(); 

     // Add id to clicked articles 
     jQuery(this).closest('article').attr('id','active'); 

     // Add the giant class to resize element 
     jQuery(this).closest('article').toggleClass('giant'); 

     jQuery('#grid').masonry(); 

     jQuery('#grid').masonry('on','layoutComplete', function(msnryInstance, laidOutItems) { 

      jQuery('html, body').animate({ 
       scrollTop: jQuery('#active').offset().top 
      }, 500); 

      jQuery('article').removeAttr('id'); 

     }); 

    }); 

} 

Вот код в функции обратного вызова для плагина WordPress Infinite Scroll.

var $newElems = jQuery(newElements).css({ opacity: 0 }); 
$newElems.imagesLoaded(function(){ 
$newElems.animate({ opacity: 1 }); 
jQuery('#grid').masonry('appended', $newElems, true); 
}); 
activeArticle(); 

Answer 1

Закончено просто написать другую функцию и поместить ее в обратный вызов. Вот другая функция. Похоже, что это вторая, третья, загружает без проблем.

function activeArticleInfinite() { 

jQuery('#infscr-loading').nextAll('article').find('img').click(function(event) { 

    event.preventDefault(); 

    // Add id to clicked articles 
    jQuery(this).closest('article').attr('id','active'); 

    // Add the giant class to resize element 
    jQuery(this).closest('article').toggleClass('giant'); 

    jQuery('#grid').masonry(); 

    jQuery('#grid').masonry('on','layoutComplete', function(msnryInstance, laidOutItems) { 

     jQuery('html, body').animate({ 
      scrollTop: jQuery('#active').offset().top 
     }, 500); 

     jQuery('article').removeAttr('id'); 

    }); 

}); 

}