after AJAX content loads multiple scrips need to reload

Question

I am making an website where the menu runs with AJAX for an smooth page transition but i am running into the problem of having to reload my page after my AJAX because on the loaded content the does not get effected by the Javascript files.

$.ajax({
  history.pushState(url, null, url_i_am_requesting);
  url: url_i_am_requesting,
  success: function(html) {
    var content = $('<div />').html(html).find('.page-wrapper');
    $('.page-wrapper').html(content);
  }
});

I have found that jQuery.getScript() works fine, but when I have around 10 Javascript files, is there a way to execute them all again after the AJAX has finished without calling them one by one?

The JS code you've shown is invalid; you can't randomly set `pushState` in the middle of the object you provide to `$.ajax`. Regarding the issue, it simply sounds like you need to use delegated event handlers for the content you inject in to `.page-wrapper` — Rory McCrossan, Oct 17 '18 at 07:54

score 0 · Accepted Answer · answered Mar 25 '20 at 07:52

jQuery's $.getScript() is buggy sometimes, so I use my own implementation of it like:

jQuery.loadScript = function (url, callback) {
    jQuery.ajax({
        url: url,
        dataType: 'script',
        success: callback,
        async: true
    });
}

and use it like:

if (typeof someObject == 'undefined') $.loadScript('url_to_someScript.js', function(){
    //Stuff to do after someScript has loaded
});

after AJAX content loads multiple scrips need to reload

1 Answers1