jquery - 当我单击不同的链接时，jQuery 事件侦听器给我相同的值

Question

我做了一个问题的jsfiddle

http://jsfiddle.net/XXVAP/

问题是我单击的任何项目都会向我显示最后一个 ID（即 10）

这快把我逼疯了！帮助

Answer 1

那是因为您正在提醒一个预定义的变量。在您的 for 循环中，您正在更新id变量的值，在最后一次迭代中，它的值变为10并且您在每个元素的单击处理程序中警告该变量。你应该使用this.id：

alert(this.id);

http://jsfiddle.net/2dfkh/

请注意，您的代码中的事件是undefined.

Answer 2

问题可以归结为...

var l = 10;
for(var i = 0; i < l; ++i) {
    $("#item-" + i).click(function() {
        alert(i);
    });
}

click 函数的内容在它通过循环时不会被评估，而是当你点击元素时，它将运行该函数并警告i当时的任何内容......在这种情况下它将是 10。保持持有你可以做很多事情的时候的价值。

将值作为数据项传递给元素。

var l = 10;
for(var i = 0; i < l; ++i) {
    $("#item-" + i).data("id", i).click(function() {
        alert($(this).data("id"));
    });
}

创建一个内部外壳，它看起来很棘手，但它只是一个立即调用的函数，它返回点击处理函数。

var l = 10;
for(var i = 0; i < l; ++i) {
    $("#item-" + i).click((function(n) {
        return function() {
            alert(n);
        }
    })(i));
}

你也可以写...

function handler(n) {
    return function() {
        alert(n);
    }
}
var l = 10;
for(var i = 0; i < l; ++i) {
    $("#item-" + i).click(handler(i));
}

或者你可以将整个绑定作为一个新函数......

function bindElement(n) {
    $("#item-" + n).click(function() {
        alert(n);
    });
}
var l = 10;
for(var i = 0; i < l; ++i) {
    bindElement(i);
}

---

注意： W3C 规范规定 id 不应以数字开头，http://www.w3.org/TR/html401/types.html#type-name 6.2，bullet 2。要使 HTML 有效，您应该在前面加上它用字符串。

---

这是一个显示不同解决方案的小提琴http://jsfiddle.net/XXVAP/8/