While creating buttons in for onclick function is overwritten

Asked Sep 09 '18 at 21:47

Active Sep 09 '18 at 21:47

Viewed 22 times

I have an ajax which loads a few buttons based on some json data

$.ajax({
    type: "GET",
    url: "/some/",
    dataType: 'json',
    success: function(data) {
        for(var i = 0; i < data.cities.length; i++)
        {
            var button = document.createElement("button");
            var a = data.cities[i].a;
            var b = data.cities[i].b;
            button.onclick = function() { alert(a + ', ' + b); };
            button.innerHTML = a + ', ' + b;
            $("#div").append(button);
        }
    }
});

Each record in json is different what is shown on loaded buttons but when I click on any of them alert is shown with data from last record. As I understand each step of loop overwrites onclick functions for all buttons that have been already created but I can't figure out why and how to fix it. Does anyone know maybe what is the problem here?

asked Sep 09 '18 at 21:47

kebie

1

Use a closure loop. The variables will have changed by the time event occurs – charlietfl Sep 09 '18 at 21:49
Yes, change to `let` did the trick – kebie Sep 09 '18 at 21:53
The link above is a good start. Using `$.each` or `Array#forEach` instead of `for` loop also create closures – charlietfl Sep 09 '18 at 21:58

While creating buttons in for onclick function is overwritten

0 Answers0