在循环中绑定单击事件处理程序会导致 jQuery 出现问题答案

【问题标题】：Binding click event handlers in a loop causing problems in jQuery在循环中绑定单击事件处理程序会导致 jQuery 出现问题
【发布时间】：2011-04-01 16:14:36
【问题描述】：

我正在尝试运行以下代码：

我将参数传递给函数，但它始终具有通过循环运行的最后一个对象的值。我在 stackoverflow 上阅读了一些关于它的文章，但我不知道如何让它在我的解决方案中运行。

对象是从服务器返回的 JSON 对象。它的所有值都是正确的。

for(var i = 0;i<parents.length;i++){
            var row        = $(document.createElement("tr"));
            var colName    = $(document.createElement("td"));

            var aDisplayCol = $(document.createElement("a"));

            var parentId = parents[i]['PARENT_ID'];

            aDisplayCol.attr("href","#").html(parents[i]['NAME']);
            aDisplayCol.bind('click',function(){ alert(parentId);});


            colName.append(aDisplayCol);

            row.append(colName);
            $('#pages tbody').append(row);

}

谢谢

【问题讨论】：

标签： jquery loops closures onclick

【解决方案1】：

你可以通过绑定函数的 eventData 参数来避免 clouseres 问题像这样

var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
    alert(event.data.msg);
});
message = 'Not in the face!';
$('#bar').bind('click', {msg: message}, function(event) {
    alert(event.data.msg);
});

这是来自 jquery 绑定 api 文档http://api.jquery.com/bind/#passing-event-data

【讨论】：

【解决方案2】：

这是一个范围问题。当事件处理函数被执行时，parentId 的值已经改变并且不再是你所期望的。

这可以解决，使原始事件处理函数由另一个函数返回，而另一个函数又将parentId 的值作为参数传递：

function getEventHandlerFunction(id){
    return function() {
        alert(id);  // variable found in the closure with the expected value
    };
}


aDisplayCol.bind('click', getEventHandlerFunction(parentId));

【讨论】：

【解决方案3】：

也许在回调中使用parentId 有问题。

试试alert(parents[i]['PARENT_ID']);。

编辑：让我们看看是否可以使用.data() 解决我们的范围问题。

aDisplayCol.data("parentId",parents[i]['PARENT_ID']);
aDisplayCol.click(function() {
   alert($(this).data('parentId'));
});

【讨论】：

不，这不是原因。实际上，我昨天发现 .click 函数无法处理以下内容： aDisplayCol.click(function(){ whatever(target,dest, parents[i]['PARENT_ID']); return false; });我认为这是一个错误。传递一个变量可以正常工作。
不，我不认为这是一个错误。我认为这是一个范围问题。我认为i 不存在于点击处理程序的范围内。
您忘记在 .data 处关闭括号
使用 .data 有效！真棒 :D 谢谢。这是一个闭包问题。