toggleClass odd behavior after infinite scroll and masonry load - jquery-masonry

Question

Have a toggleClass on click that works fine for content loaded before infinite scroll and works fine on content appended to masonry after infinite scroll, but won't work any longer of previously loaded content.
For example//
Page Loads
<article></article>
<article></article>
<article></article>
(Toggle Class works fine on all above article elements)
but then add infinite scroll and appended masonry
load more article elements
<article></article>
<article></article>
<article></article>
(toggleClass works fine on the last loaded content, but not the article elements from page load.)
If done a third time,
<article></article>
<article></article>
<article></article>
(toggleClass works on above, and initial page loaded article elements, but not elements in the middle, which were the first elements loaded from infinite scroll)
I'm adding and removing an ID when element is clicked so ScrollTo works, and that seems to work fine all the time. So there is something off with the toggleClass().
Here is the code in the .js file.
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');
});
});
}
Here is the code in the call back function for the WordPress Infinite Scroll Plugin.
var $newElems = jQuery(newElements).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
jQuery('#grid').masonry( 'appended', $newElems, true );
});
activeArticle();

Answer 1

Ended up just writing another function and putting that in the call back. Here is the other function. This appears to work second, third, loads w/o issue.
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');
});
});
}