html is but javascript is not rendering in div after onclick function

Question

I'm using a button onclick function to load content into a div called #content on my index page. Following is the on click javascript function.

function myFunction() {

   $('#content').load("content/page1.php");

};

It works fine, but when it grabs the loaded php file, all the javascript specifically on that page1.php is not rendered in the #content div. The html renders fine. And if you type the absolute path of page1.php in the browser address bar, the page1.php javascript also renders fine.

Any ideas on how to make the javascript render in that #content div? I'm using a newer version of chrome.

Answer 1

According to the documentation for load ,

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded .

I would suggest you consider restructuring your javascript so that its loaded in a module within the parent page if it makes sense, as it makes things much easier to debug. If that isn't an option, the script blocks are still executed...