带有绑定单击事件的Javascript循环始终返回最后一个结果

我在javascript中运行了一个for循环。在这个循环中，我创建了一个列表项并绑定了一个click事件。单击此列表项时，我希望它调用一个函数，将当前循环对象中的数据作为参数

问题是，无论我单击哪个列表项。作为参数传递的数据是我正在循环的对象的最后一个元素，而不是正在单击的当前元素

for(e in data) {

    var suggestItem = $('<li>'+ data[e]['name'] +'</li>');

    suggestItem.click(function() {
        $(this).addClass('activeSuggestion');
        suggestSelect(suggestField, data[e]);      
    });

    suggestList.append(suggestItem);

}

for（数据中的e）{
var suggestItem=$（“
”+数据[e]['name']+'
”）；
suggestItem。单击（函数（）{
$（this.addClass（'activeSuggestion'）；
suggestSelect（suggestField，数据[e]）；
});
suggestList.append（suggestItem）；
}

---

我想我理解为什么会发生这种情况，但不确定我应该如何处理。

你需要打破

e

的封闭

由于您使用的是jQuery，最简单的方法是使用jQuery的

data

函数保存

e

的当前值。由于JavaScript中的所有函数参数都是按值传递的，这实际上打破了闭包；现在，单击处理程序将处理创建处理程序时

e

的值，而不是循环结束时

e

的值

for(e in data) {

    var suggestItem = $('<li>'+ data[e]['name'] +'</li>');

    suggestItem.data('savedE', e).click(function() {
        $(this).addClass('activeSuggestion');
        suggestSelect(suggestField, data[$(this).data('savedE')]);
    });

    suggestList.append(suggestItem);

}

for（数据中的e）{
var suggestItem=$（“
”+数据[e]['name']+'
”）；
suggestItem.data（'savedE'，e）。单击（函数（）{
$（this.addClass（'activeSuggestion'）；
suggestSelect（suggestField，数据[$（this）.data（'savedE'））；
});
suggestList.append（suggestItem）；
}

这是一个经典的Javascript闭包问题。当点击事件被触发时（当你点击某物时），循环已经完成执行。

e

的值是

data

中最后一个键的值。问题的解决方案是在循环中创建一个新的作用域

for(var e in data) {
    (function(datum) {
        suggestList.append(
            $('<li>' + datum.name + '</li>')
            .click(function() {
                $(this).addClass('activeSuggestion');
                suggestSelect(suggestField, datum);      
            });
        );
    })(data[e]);
}

它不会将参数传递给函数，但由于Javascript是函数作用域，因此每次触发click事件时，它都会查找分配了

datum

的位置

另外，请注意（数据中的VAR e）的

，这将阻止
e
成为全局变量。
的可能重复项
for(var e in data) {
    (function() {
        var datum = data[e];
        suggestList.append(
            $('<li>' + datum.name + '</li>')
            .click(function() {
                $(this).addClass('activeSuggestion');
                suggestSelect(suggestField, datum);      
            });
        );
    })();
}