Height matching AJAXed elements using [data-mh] method

[lukeseager]

I've read about issues with AJAX and matchHeight, and have tried to suggested solutions with no joy so far.

I'm using the [data-mh] method to run my height matches, so I'm not sure if this has any bearing on my issue.

So, I have elements which has the [data-mh] attribute set with about 3 different groups running at one time. I'm AJAX-ing in more elements, and want to height match these new elements in the same way.

I have the following code at the moment, commented with where I think the issue is:

`$(document).on('click', '.js-load-more', function(e) {

	e.preventDefault();
	
	var button = $(this);
	var offset = $('.ajax-dump').find('.product-box').length/12;
	var termID = button.data('id');
	var taxonomy = button.data('taxonomy');
	var postType = button.data('posttype');
	var ajaxDump = $('.ajax-dump');
	
	ajaxDump.addClass('preloader');
	button.show().html('Loading...');
					
	$.ajax({
		url: loadMoreProducts.ajax_url,
		type: 'post',
		data: {
			action: 'load_more_products',
			offset: offset, 
			termID: termID,
			taxonomy: taxonomy, 
			postType: postType,
		}, 
		dataType: 'json',
		success: function(result) {
			
			var products = result.posts;
			var count = result.count;
			
			ajaxDump.append(products);
			moreProductsCallback();
			
			if( count < 12 ) { // there are no more products...
				$('.js-load-more').hide();
			}
		},
		error: function(error) {
			console.log(error);
		}
	});
	
	function moreProductsCallback() {
		
		ajaxDump.removeClass('preloader').find('.page.hide').fadeIn(500, function() {
			
			$('.page').removeClass('hide');
			button.html('Load More Products'); 
			var newProducts = $('.ajax-dump').find('[data-mh]'); // this finds all the correct elements

			$.fn.matchHeight._maintainScroll = true;
			newProducts.matchHeight({ remove: true }); // this works, removes the height match from all elements
			$.fn.matchHeight._apply(newProducts); // this doesn't do anything

		});
	}
	
});`

I'm hoping I'm just going wrong somewhere, but I've been looking at this for a couple of days now, with no joy.

EDIT

When the $.fn.matchHeight._apply(newProducts); runs, my [data-mh] elements do get an inline style attribute added, but no style is actually attached to the elements.

[MohammadDayeh]

You need to do it this way:

$('[data-mh]').matchHeight({ remove: true });
$.fn.matchHeight._maintainScroll = true;
$.fn.matchHeight._applyDataApi();

[kanaxx]

て得た居て谷地チネチラ絵ええニムカカカ笑みアナタアヤ戸エアエ治で谷（片江中（な　書か)エネ地満たない鳩化木勝ちたなタァ谷田ゆらおら縦絵のあやいてかかつ嵩上げ書きチエなさ合致エアね苗が知恵が斬ケ