更改JavaScript並刪除舊的JavaScript

Question

在我的HTML頭中我有這個腳本包括：

<script id="mode" type="text/javascript" src="article.js"></script>

單擊按鈕，我想將腳本的源代碼更改為customers.js，以便它看起來像這樣：

<script id="mode" type="text/javascript" src="customers.js"></script>

關鍵是我不希望將article.js包含在我的頁面中，所以我不能只使用.append() 。

因此，單擊文章按鈕 - > 僅包含article.js，單擊customers按鈕 - > 僅包含customers.js。

我嘗試用這種方式用jQuery解決這個問題，但我似乎沒有工作......：

$("#btArticle").click(function(){
  $("#mode").attr("src","article.js");
});

$("#btCustomers").click(function(){
  $("#mode").attr("src","customers.js");
});

你知道我的錯誤在哪里嗎？

更新： customers.js和article.js中有相同名稱的方法。 所以在它們中都有一個onSave（）方法，當我之前單擊customer按鈕時，我希望執行customers.js的onSave（）方法，而不是articles.js中的方法。

Answer 1

關鍵是我不希望將article.js包含在我的頁面中，所以我不能只使用.append() 。

一旦下載並評估了腳本，除非明確刪除，否則它所留下的任何內容都將保留; 它們沒有鏈接到script元素本身，刪除它不會對它們產生任何影響。

只有這樣，才能擺脫的東西article.js葉子躺在身邊是刪除或覆蓋它創造並保持每一個事情。

具體例子：

// article.js
var foo = "bar";
jQuery(function($) {
    $(".stuff").click(function() {
        alert("You clicked stuff!");
    });
});

如果處理了上面列出的article.js ，則可以刪除加載它的script元素，這對foo全局變量或它連接的事件處理程序沒有影響。

如果您想要卸載可以卸載的腳本，請讓它們使用帶有單個全局符號的模塊模式，它們通過分配給window上的屬性來添加，例如：

// article.js
window.articleScript = (function() {
    var foo = "bar";
    jQuery(function($) {
        $(".stuff").bind("click.article", function() {
            alert("You clicked stuff!");
        });
    });

    function remove() {
        $(".stuff").unbind("click.article");
        try {
            delete window.articleScript;
        }
        catch (e) { // Early IEs throw incorrectly on the above
            window.articleScript = undefined;
        }
    }

    return {
        remove: remove
    };
})();

然后您可以通過執行以下操作將其刪除：

articleScript.remove();

---

重新評論這個問題：

也許我應該提到兩個文件中都有同名的方法。

如果customers.js中的全局函數聲明與articles.js全局函數聲明使用相同的名稱，則在加載customers.js ，它將替換這些函數。

所以如果你在articles.js有這個：

function foo() {
    alert("Articles!");
}

......在customers.js ：

function foo() {
    alert("Customers!");
}

你有一個按鈕：

<input type="button" onclick="foo();" value="Foo">

當您只加載articles.js而不是customers.js ，單擊該按鈕會為您提供“文章！”。 如果您隨后加載customers.js ，單擊該按鈕將為您提供“Customers！”。

這是因為事件處理程序調用 foo() ，但事件處理程序本身不是 foo 。 onclick屬性為您創建一個隱藏的事件處理程序。 等效的jQuery將是：

$("input[type='button'][value='Foo']").click(function() {
    foo();
});

請注意，只是在做.click(foo)會做一些非常不同：它會掛鈎的函數foo點， 在那一刻作為事件處理程序。 即使您稍后更改了foo指向的內容（通過加載customers.js ），也不會改變舊函數作為處理程序連接的事實。

FWIW，從問題和你的意見，我想我建議坐下來回顧你的這個頁面/應用程序的策略。 所有這些代碼的進出交換似乎都是一個設計問題。

Answer 2

您實際上並未加載和運行相應的腳本，而只是更改該標記的源。 使用.getScript()加載並運行相應的JavaScript文件：

http://api.jquery.com/jQuery.getScript/