在多个脚本中定义的jQuery .ready()中使用相同的变量

时间:2012-09-28 00:02:17

标签: javascript jquery

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

...
<script type="text/javascript" src="general.js"></script>
<script type="text/javascript" src="specific.js"></script>
...

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

general.js:

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

specific.js:

jQuery(function() {
  foo = function() {alert("hello")};
  $('#btn').click(function() {foo()});
}

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

当我点击#btn时,我希望看到“hello”对话框,但我在chrome开发人员工具中获得了Uncaught TypeError: undefined is not a function

我自己的理解是foo应该在click事件访问之前已经为函数分配了函数,而不是未定义。显然,我的理解是不正确的。有人可以向我解释为什么它的表现如此吗?

1 个答案:

答案 0 :(得分:4)

你在第一个函数中用var 声明“foo”。因此它是该功能的本地功能,并且在其外部不可见。

你可以通过声明外面第一个“就绪”处理程序来使“foo”全局化。

全局变量有点不可取;将值保存为元素本身的“数据”值可能更好。

$(function() {
   $('#btn').data('foo', 'some value');
   $('#btn').click(function() {alert($(this).data('foo'))});
}

这样数据就与元素相关联(虽然不直接在DOM对象上; jQuery跟踪内部映射中的值以避免与DOM相关的内存泄漏),并且不会污染全局命名空间。 / p>