CODEWITHSUNDEEP
jqueryajaxload
Jordan Carter
Jordan Carter

Reputation: 1336

Detect when an element is done loading new HTML

I have a load event in another js file, which uses .on('load') to load in new HTML when clicking on pagination. However, I need something to happen in another script once that html is done loaded. So far I've tried this, but no luck. js-ajax-content-container is the element that is loading in new HTML. js-ajax-link is the pagination link I click to initiate the load event.

$('body').on('click', '.js-ajax-link', function() {
  $('body').on('.js-ajax-content-container', 'ajaxComplete', function() {
    alert("loaded");
  });
});

Upvotes: 0

Views: 365

Answers (1)

Sagiv b.g
Sagiv b.g

Reputation: 31024

You can fire a custom event in one script and listen to it in another.

By the way, your arguments are in the wrong order for on().
First you pass the event name and then the selector. 

$('body').on('click', '.js-ajax-link', function() {
  $('body').on('ajaxComplete','.js-ajax-content-container', function() {
    $(document).trigger('ajaxLinkLoaded');
  });
});

And in another script you can listen to this event: 

$(document).on('ajaxLinkLoaded', function(e){ // do something});

Upvotes: 2

Related Questions