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”的范围，如果找到，请使用$.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，您可能希望避免使用内联脚本。

如何使用jquery.load（）加载脚本？

2 个答案: