Question

I’m trying to use .load to load some content in my page, and I have some js files which are only used in loaded content, So i want to load these files only after the content is loaded.
This is my code:

$("#highlight").load("content.php #" + $(this).attr('name'), function(){
                $.getScript('js/jquery-ui-1.9.2.custom.min.js');
                $.getScript('js/plugins.js');
                $.getScript('js/script2.js');
                });

This code is located in script.js which is included in the main page, I need script2.js , plugins.js & jquery ui to load after content.php, But it doesn’t seem to work.
Thanks in advance to anyone who can help.

Edit:

The Idea is to get some jquery functions working in the loaded content,
any solution to this is appreciated.

Answer 1

Assuming the load callback was called successfully, the problem with using $.getScript this way is that it’s asynchronous, so they may be executed out of order. To ensure proper order, either use $.ajax directly (using async:false as option, as well as dataType: "script"), or chain the loading in each other’s callbacks (avoids blocking the rest of the page’s scripts):

$("#highlight").load("content.php#" + $(this).attr('name'), function(){
    $.getScript('js/jquery-ui-1.9.2.custom.min.js', function() {
        $.getScript('js/plugins.js', function() {
            $.getScript('js/script2.js');
        });
    });
});