$.fn update not firing

I have a group which has content appended to it via AJAX. At the end of the images loading in the group, I show the content.

If I use: $('.blocks').matchHeight(true); it works perfectly fine.

If I use: $('.blocks').matchHeight(true); outside of the $.ajax call and try utilizing $.fn.matchHeight._update(); to trigger an update when the content is shown, it doesn’t fire.

I have a few other areas where the content is dynamically adjusted and I’d like to have the matchHeight updated but as of now, I can’t do that. I assume sprinkling .matchHeight(true); 's everywhere is probably not the greatest option, so hopefully, I’m just missing something painfully obvious. 😄

[liabru]

I think the problem here may be a misunderstanding of how the plugin works.

When you call the _update() function, it will only update the original elements that you have previously applied matchHeight to. Any new elements matching any previously used selectors will not be included because it does not update the set of selected elements.

Instead you need to create a new selection that includes the new element and remove the old one.

Here is an example:

// the original group of .item
$('.item').matchHeight();

// make some ajax call
$.get('/api/something').done(function() { 
    // a new .item is added, but this is not in the original group
    $('body').append('<div class="item">');

    // remove the old group
    $('.item').matchHeight({ remove: true });

    // apply matchHeight on the new selection, which includes the new element
    $('.item').matchHeight();
})

I hope that clears things up.

If this still doesn’t solve the problem you guys are having, please provide more information and an example. Thanks.

[hippocodes]

Hi, I am not having any luck with the following code. I am using a jQuery load more button to load new items (.suitec11-item), but the newly added items are not resizing. The live page is: http://chameleonmethod.com/suite-c11

// MANUALLY CALL MATCHHEIGHT ON SUITEC11 ITEMS jQuery(document).ready(function(){ jQuery('.suitec11-mh').matchHeight(); }); // LOAD MORE POSTS jQuery(document).ready(function(){ jQuery('.load_more a').live('click', function(e){ e.preventDefault(); var link = jQuery(this).attr('href'); jQuery('.load_more').html('<span class="loader">Loading More Posts...</span>'); jQuery.get(link, function(data) { var post = jQuery("#suitec11-sec-two .suitec11-item-wrap", data); jQuery('#suitec11-sec-two .container .row').append(post); }); // remove matchHeight on items, which includes the new element jQuery('.suitec11-mh').matchHeight({ remove: true }); // apply matchHeight on the new selection, which includes the new element jQuery('.suitec11-mh').matchHeight(); jQuery('.load_more').load(link+' .load_more a'); }); });

Any help is much appreciated!