如何使用 jquery.load() 加载脚本？

Question

I have a question.

In my file content.html I have script. When load this with the load() function of jQuery, the page shows but the script doesn't work. I think it's because of a selector.

How can I solve that ?

EDIT :

$(document).ready(function(){
$('#content').load('content.html #toLoad', function(){});
})

Thanks

Answer 1

When you say "the script doesn't work" do you mean there's javascript in the page you're loading through ajax?

It's not going to work, ever, at least not directly.

You have two choices. Parse out the script from the content you've loaded, and use eval to run it.

A better way is to use $.getScript to load (and execute) javascript. If you want to bind your javascript with the HTML you've loaded, then you need some convention to identify the script. For example you could include a tag in your dynamically loaded html:

<span style="display:none;" id="script">/scripts/somescript.js</span>

Then look for a span with id="script" when you load the content, if you find it, use $.getScript to load the script it identifies.

example...

$.load('content.html #toLoad', function(data){
    var $script = $(data).find('span[id=script]');
    if ($script.length) {
        $.getScript($script.html());
        // remove the span tag -- no need to render it
        $script.remove();
    }
    $('#content').html(data);
});

Answer 2

I know this is an old question from several years ago, but I was not satisfied with the accepted answer when I stumbled onto this page. Here's an alternative I wrote that automatically finds all of the scripts within the content you are loading, and runs each of those scripts regardless of whether the script is inline or an external file.

$("#content").load("content.html #toLoad", function(data) {
    var scripts = $(data).find("script");

    if (scripts.length) {
        $(scripts).each(function() {
            if ($(this).attr("src")) {
                $.getScript($(this).attr("src"));
            }
            else {
                eval($(this).html());
            }
        });
    }

});

This code finds all of the script elements in the content that is being loaded, and loops through each of these elements. If the element has a src attribute, meaning it is a script from an external file, we use the jQuery.getScript method of fetching and running the script. If the element does not have a src attribute, meaning it is an inline script, we simply use eval to run the code.

I've tested this method in Chrome and it works. Remember to be cautious when using eval , as it can run potentially unsafe scripts and is generally considered harmful. You might want to avoid using inline scripts when using this method in order to avoid having to use eval .