jquery点击事件的Javascript变量范围问题

Question

我正在尝试将存储在数组中的一系列对象分配给 jquery click 事件处理程序。

问题是，当事件触发时，我只引用数组中的最后一个对象。

我整理了一个简单的例子来说明问题：

function dothis() {
    this.btns = new Array('#button1', '#button2');
}

// Add click handler to each button in array:
dothis.prototype.ClickEvents = function () {

    //get each item in array:
    for (var i in this.btns) {

        var btn = this.btns[i];
        console.debug('Adding click handler to button: ' + btn);

        $(btn).click(function () {
            alert('You clicked : ' + btn);
            return false;
        });
    }
}

var doit = new dothis();
doit.ClickEvents();

HTML 表单包含几个按钮：

<input type="submit" name="button1" value="Button1" id="button1" />
<input type="submit" name="button2" value="Button2" id="button2" />

当button1被点击时，它会说“你点击了#Button2”

似乎两个按钮单击处理程序都指向 var btn 中的同一个对象。

考虑到变量在for循环内，我不明白为什么。

有什么想法吗？

Answer 1

你的问题在这里：

alert('You clicked : ' + btn);

btn 保留上次在循环中调用时的值。从事件中的按钮读取值。

    $(btn).data('selector', btn).click(function () {
        alert('You clicked : ' + $(this).data('selector'));
        return false;
    });

http://jsfiddle.net/Mc9Jr/1/

Answer 2

你必须为此使用闭包。 我不确定我是否记得正确的语法，但你可以试试这个：

$(btn).click(function () {
    return function() {
        alert('You clicked : ' + btn);
        return false;
    }
});

Answer 3

也许您只需要更改点击绑定：

$(btn).click(function () {
    alert('You clicked : ' + $(this).attr('id'));
    return false;
});

Answer 4

你需要一个函数工厂来关闭循环变量，比如这样：

//get each item in array:
for (var i=0; i<this.btns.length; i++) {

    $(this.btns[i]).click(function(item) { 
        return function () {
            alert('You clicked : ' + item);
            return false;
        }
    }(this.btns[i]));

}

另一个不错的选择是让 jquery 帮助你。使用 jQuery.each()。此处的变量 btn 是处理函数的本地变量，因此不会在迭代之间重用。这允许您关闭它并让它保持其价值。

$.each(this.btns, function() {
    var btn = this;
    $(this).click(function () {
        alert('You clicked : ' + btn);
        return false;
    }
});

Answer 5

在事件处理程序中，“this”通常是指触发事件的元素，在这种情况下，它将是您的按钮

所以解决问题的方法相当简单，我们无需引用 btn 变量，它位于更高的范围内并在事件处理程序触发之前很久就发生了变异，我们只需引用触发事件的元素并获取其 ID

$(btn).click(function () {
  alert('You clicked : #' + this.id);
  return false;
});

注意：如果您的数组包含仅包含 ID 的其他选择器，这显然不会反映这一点，而只是继续显示 ID

幸运的是，点击处理程序（以及所有其他事件处理程序 afaik）为 eventData 提供了一个额外的参数，如下所示：

$(btn).click(btn, function (event) {
  alert('You clicked : #' + event.data);
  return false;
});

如果您要传递多个东西，请使用数组：

$(btn).click(['foo', 'bar'], function (event) {
  alert('this should be "foo": ' + event.data[0]);
  alert('this should be "bar": ' + event.data[1]);
  return false;
});