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()。

所以，点击文章按钮 - ＆gt; 仅 article.js包含，点击客户按钮 - ＆gt; 仅 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时，点击该按钮会为您提供文章！＆＃34;。如果您随后加载foo()，点击该按钮将为您提供＆＃34;客户！＆＃34;。

这是因为事件处理程序调用 foo，但事件处理程序本身不 onclick。 $("input[type='button'][value='Foo']").click(function() { foo(); });属性为您创建隐藏的事件处理程序。等效的jQuery将是：

.click(foo)

请注意，执行foo只会做一些非常不同的事情：它会将当前foo指向的函数连接起来作为事件处理程序。即使您将customers.js指向的内容更改为以后（通过加载{{1}}），也不会改变将旧函数作为处理程序连接起来的事实。

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

Answer 2

您实际上并未加载和运行相应的脚本，而只是更改该标记的源代码。使用.getScript()加载并运行相应的JavaScript文件：

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

更改JavaScript并删除旧的JavaScript

2 个答案: