JavaScript 变量不会保留在 jQuery 事件处理程序中
JavaScript variables do not persist in jQuery event handler
某种原因,我不了解与jQuery点击处理程序相关的局部和全局变量的范围。当我单击按钮时,我得到"未定义",但我希望它显示单击的按钮的类别。我该如何解决这个问题?
我设置了一个示例来显示我的困惑。在这里小提琴:http://jsfiddle.net/zvhsqeyn/
简单的 html 按钮:
<button class="hobbies">hobbies</button>
<button class="sledding">sledding</button>
<button class="personal">personal</button>
<button class="food">food</button>
一些javascript来处理单击按钮的事件。
var GLOBAL_CATEGORIES = ['hobbies', 'sledding'];
$(window).load(function() {
var categories = ['personal', 'food'];
// local categories
for (var i = 0; i < categories.length; i++) {
$('.' + categories[i]).click(function() {
alert(categories[i]);
return false;
});
}
// Global categories
for (var i = 0; i < GLOBAL_CATEGORIES.length; i++) {
$('.' + GLOBAL_CATEGORIES[i]).click(function() {
alert(GLOBAL_CATEGORIES[i]);
return false;
});
}
});
编辑:接受反馈后,这是正常工作 http://jsfiddle.net/zvhsqeyn/1/
这与闭包的性质有关。
// local categories
for (var i = 0; i < categories.length; i++) {
$('.' + categories[i]).click(function() {
alert(categories[i]);
return false;
});
}
您将分配一个匿名函数作为其中每个按钮的单击处理程序。 该函数可以访问变量i
,因为它在父作用域中可见。 但是 - 当您单击其中一个按钮时,您的循环早已完成,并且i
的值现在等于 categories.length。 那里没有任何元素,因此您的单击函数返回 undefined
。
通常,在循环中分配事件处理程序时依赖索引变量的值是不安全的。 作为解决方法,您可以使用 jquery $.each 函数:
$.each(categories, function(index, value) {
// local categories
$('.' + value).click(function() {
alert(value);
return false;
});
});
这是有效的,因为它为每个单击处理程序函数创建了一个单独的闭包。
这是一个非常常见的问题,这是解释
如果我们按照这个过程进行操作,您正在做的是将点击侦听器添加到第 i 个GLOBAL_CATEGORIES
,然后继续下一个。 执行此操作,直到i
对于GLOBAL_CATEGORIES
数组来说太大。
您必须记住,i
只设置了一次,所以现在i
比GLOBAL_CATEGORIES
的长度多 1 . 这意味着当警报触发时,GLOBAL_CATEGORIES[i]
未定义,因为警报太大i
。
更好的方法是使用 jQuery each
语法,如下所示
$.each(GLOBAL_CATEGORIES, function(i, category) {
$('.' + category).click(function() {
alert(category);
return false;
});
});
- Jquery事件处理程序仅适用于匿名函数
- 如何在jQuery事件处理程序中存储和重用超时
- jQuery 事件处理程序堆叠
- 动态添加对象的jQuery事件处理程序
- event.stopPropagation() 在 jQuery 事件处理程序中不起作用
- Typescript 此关键字在 jquery 事件处理程序中不起作用
- Jquery事件处理程序未启动
- 我在jQuery事件处理和隐藏/显示图像元素方面做错了什么
- 有没有办法扩展已经绑定的jQuery事件处理程序
- JQuery事件处理程序在事件发生前激发
- 正在取消绑定jQuery事件处理程序
- 如何在选择的按钮上动态/不断地绑定jQuery事件处理程序
- Jquery 事件处理程序未在 Rails 应用程序中触发
- 如何获取 jQuery 事件处理程序返回值
- 我的javascript变量在jquery事件处理程序上没有更新
- 我的按钮的 jQuery 事件处理程序只工作一次
- JavaScript 变量不会保留在 jQuery 事件处理程序中
- 如何将 JQuery 事件处理程序分配给特定事件
- JQuery - 事件处理程序中的 accessss 对象属性
- 如果不在 onLoad 函数中,jQuery 事件处理程序不起作用