Load HTML/Javascript dynamically

Question

I have an index.html page and I want to load the content of another page to index.html dynamically using jQuery. I use $.load() function to do this :

$('#dynamic_content').load('another.html #toLoad')

It works fine, but I need also to load javascript files that uses another.html, so I do:

$('#dynamic_content').load('another.html #toLoad');
$.getScript('js/another.js');

The problem is that the js code of 'another.js' sometimes doesn't 'apply' to html page(maybe it loads earlier than the html page) Content of another.js:

$(document).ready(function {} {

   $('#cancelButton').click(function() {
       //do something 

});

});

Answer 1

Use the success callback:

$('#dynamic_content').load('another.html #toLoad', function() {
    $.getScript('js/another.js');
});

This way if another.js manipulates the dynamically loaded contents from another.html it will be guaranteed that this content has already been injected into the current DOM tree.