多个jQuery .ready（） – 附加到现有的事件处理程序而不是创建另一个

假设我有一个链接到两个脚本的HTML：

...   ... 

这两个脚本中的每一个都有自己定义的jQuery的.ready() 。

general.js：

 jQuery(function() { var foo; $('#btn').click(function() {alert(foo())}); } 

home_specific.js： “[pagename] _specific.js”的示例

 jQuery(function() { foo = function() {alert("hello")}; } 

其中#btn是一个按钮元素。

“general.js”是由多个页面共享的脚本，而每个页面都有专用的“[pagename] _specific.js”，用于定义分配给foo的函数的行为方式。

当我点击#btn我希望看到“hello”对话框，但相反，我得到了Uncaught TypeError: undefined is not a function chrome开发人员工具中的Uncaught TypeError: undefined is not a function 。 从这个SO问题 ，我理解这是因为两个.ready()有两个独立的事件处理程序。

问题： “[pagename] _specific.js”中的.ready()附加到“general.js”中的.ready()的事件处理程序，而不是定义另一个匿名函数？

Answer 1

脚本中实际发生的事情与您的想法不同。

在下面的：

 jQuery(function() { var foo; $('#btn').click(function() {alert(foo())}); } 

你已经通过在它前面键入var来创建foo的本地副本。 在这种情况下，foo是未定义的。

在下面的：

 jQuery(function() { foo = function() {alert("hello")}; } 

您实际上已经创建了名为foo的全局可访问函数。 但是在调用之前不会执行。 但是在第一个脚本中，您尝试调用它。 但实际发生的是你的脚本尝试使用自己的本地定义的变量foo，它是未定义的。

以下是我会做的

 // general.js: jQuery(function() { $('#btn').click(function() { foo(); }); }); // home_specific.js var foo = function() { alert("hello"); }; 

好吧，我希望这有帮助!! 希望你明白发生了什么！