Привязка обработчиков событий щелчка в цикле, вызывающая проблемы в jQuery

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

Вы можете избежать проблем clouseres с параметром eventData функции bind, например так:

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