embedded js files don't work on jQuery .load() content

Question

I have the following code in my index.html file:

<div id="page-insert"></div>

function openPage(pageid) {
  $('#page-insert').load(pageid);
}

openPage('testpage.html');

There is also a few script files embedded on index.html such as jQuery, of course, and some plugins, such as Select2. None of my plugins work on the content after it is loaded into the div. It appears as if the embedded JS files don't apply to the content loaded through jQuery. How do I get the files to apply to this content?

Are you try with after `$(document).ready(function(){// do stuff })` — prasanth, May 30 '17 at 07:05

score 1 · Accepted Answer · answered May 30 '17 at 07:05

Any plugins you use will only be instantiated on the content available in the DOM when the page loads.

To instantiate plugins on dynamically loaded content you'll need to use the callback of load(), like this:

function openPage(pageid) {
  $('#page-insert').load(pageid, function() {
    $(this).find('select').select2();
    // other plugins here...
  });
}

Also note that if you have event handlers which should be attached to content added dynamically, you should use delegated event handlers.

embedded js files don't work on jQuery .load() content

1 Answers1