如何使用 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 。