Question

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

我将参数传递给函数，但它始终具有通过循环运行的最后一个对象的值。我在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);

}

由于

Answer 1

这是一个范围问题。到执行事件处理函数时，parentId的值已更改，并且不再是您所期望的值。

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

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


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

Answer 2

在回调中使用parentId时可能存在问题。

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

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

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

Answer 3

您可以使用bind函数的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 bind api文档http://api.jquery.com/bind/#passing-event-data

在循环中绑定单击事件处理程序导致jQuery中的问题

3 个答案: