Javascript loop with associated click event always returns last result

Question

I have a for loop running in javascript. In this loop, I create a list item and attach a click event to it. When I click this list item, I want it to call a function with data from the current loop object as a parameter.

The problem is no matter what list item I click. The data that is passed as a parameter is the last element of the object I'm looping, not the current one that is pressed.

for(e in data) {

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

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

    suggestList.append(suggestItem);

}

I think I understand why this is happening, but I don’t know how I should deal with it.

Answer 1

e.

jQuery, e jQuery data. 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);

}

Answer 2

Javascript. click ( -), . 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 - , , , . "" data[e] datum, . , :

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

, , Javascript - , , , , datum.

for(VAR e in data), e .