0

在我的 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.js。

我试图用这种方式用 jQuery 解决这个问题，但我似乎没有工作......：

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

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

你知道我的错误在哪里吗？

更新： customers.js 和 article.js 中有同名的方法。所以它们都有一个 onSave() 方法，当我之前单击客户按钮时，我希望执行customers.js 的onSave() 方法，而不是articles.js 中的方法。

4

2 回答 2

2

关键是我不想再将 article.js 包含在我的页面中，所以我不能只使用.append().

一旦脚本被下载和评估，它留下的任何东西都会保留下来，除非明确删除；它们没有链接到script元素本身，删除它不会对它们产生任何影响。

摆脱article.js周围的东西的唯一方法是删除或覆盖它创建和保留的每一个东西。

具体例子：

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

如果article.js处理了上面列出的内容，您可以删除script加载它的元素，这不会影响foo全局变量或它连接的事件处理程序。

如果您想拥有可以卸载的脚本，请让他们使用带有单个全局符号的模块模式，他们通过分配给属性 on 来添加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">

当您加载了 justarticles.js和 notcustomers.js时，单击该按钮会为您提供“文章！”。如果您然后加载customers.js，单击按钮将为您提供“客户！”。

这是有效的，因为事件处理程序调用 foo()，但事件处理程序本身不是 foo。该onclick属性为您创建一个隐藏的事件处理程序。等效的 jQuery 将是：

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

请注意，只是做.click(foo)会做一些非常不同的事情：它将连接当时指向的函数作为foo事件处理程序。即使您稍后更改指向的内容（通过加载），也不会改变旧函数作为处理程序连接的事实。foocustomers.js

FWIW，从问题和您的评论来看，我想我建议您坐下来查看您针对此页面/应用程序的策略。所有这些代码的进出交换似乎都是一个设计问题。

于 2012-05-30T12:53:29.900 回答
0

您实际上并没有加载和运行相应的脚本，您只是更改了该标签的源代码。用于.getScript()加载和运行相应的 JavaScript 文件：

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

于 2012-05-30T12:53:53.817 回答