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

Question

我有个问题。

在我的文件 content.html 中有脚本。 当用jQuery的load()函数加载这个时，页面显示但脚本不起作用。 我认为这是因为选择器。

我该如何解决？

编辑 ：

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

谢谢

Answer 1

当您说“脚本不起作用”时，您的意思是您通过 ajax 加载的页面中有 javascript 吗？

它永远不会起作用，至少不会直接起作用。

你有两个选择。 从您加载的内容中解析出脚本，并使用eval运行它。

更好的方法是使用$.getScript加载（并执行）javascript。 如果您想将您的 javascript 与您加载的 HTML 绑定，那么您需要一些约定来识别脚本。 例如，您可以在动态加载的 html 中包含一个标签：

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

然后在加载内容时查找 id="script" 的 span，如果找到，则使用$.getScript加载它标识的脚本。

例子...

$.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

我知道这是几年前的一个老问题，但是当我偶然发现这个页面时，我对接受的答案并不满意。 这是我编写的替代方法，它会自动查找您正在加载的内容中的所有脚本，并运行这些脚本中的每一个，而不管脚本是内联的还是外部文件。

$("#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());
            }
        });
    }

});

此代码查找正在加载的内容中的所有脚本元素，并循环遍历这些元素中的每一个。 如果元素有一个src属性，意味着它是来自外部文件的脚本，我们使用jQuery.getScript方法来获取和运行脚本。 如果元素没有src属性，这意味着它是一个内联脚本，我们只需使用eval来运行代码。

我已经在 Chrome 中测试了这种方法并且它有效。 请记住在使用eval时要小心，因为它可能会运行潜在不安全的脚本并且通常被认为是有害的。 您可能希望在使用此方法时避免使用内联脚本，以避免必须使用eval 。