CODEWITHSUNDEEP
javascriptjquery
theateist
theateist

Reputation: 14399

Why always the last reference to the object is used in loop?

The assemblyEl is created correctly(1.jpg, 2.jpg, 3.jpg), but the ajax request always sends the last id(3).

Why this happens and how to fix it?

var assemblies = [{id:1},{id:2},{id:3}];

for (var a in assemblies) {
    var assembly = assemblies[a];

    var assemblyEl = $('<img src="' + assembly.id + '.jpg" />')
                        .click(function () {
                                 $.ajax({
                                     type: "POST",
                                     url: url,
                                     data: { id: assembly.id },
                                     async: false,
                                     success: function (data) {
                                     }
                                 });
                         });
}

Upvotes: 1

Views: 976

Answers (1)

Quentin
Quentin

Reputation: 943250

Because the click event fires when the element is clicked. By the time that happens, the value of assembly is the last value in the loop.

Use a closure to copy the value to the new scope.

function clickHandler(assembly) {
    return function () {
         $.ajax({
              type: "POST",
              url: url,
              data: { id: assembly.id },
              async: false,
              success: function (data) {
              }
          });
    };
}

.click(clickHandler(assembly));

Upvotes: 1

Related Questions