Variable in JQuery changes

Question

I post here a snippet of code where I get a runtime error. The variable x changes is value inside an ajax call:

$("#acquisto").click(function(){
            var x = 0;
            for(x = 0; x < numRighe; x++){
                if( $("#ch"+x).prop("checked") == true){
                    alert("#tr"+x);
                    $.ajax({
                          url:"eliminazioneRecord.php",
                          type: "GET",
                          data: { Codice: $("#ch"+x).val() },
                          success:function(result){
                            //$("#tr"+x).fadeOut("slow");
                            alert("#tr"+x);
                        },
                          error:function(richiesta,stato,errori){
                            alert("<strong>Chiamata fallita:</strong>"+stato+" "+errori);
                        }
                    });
                }
            }
        });

I realized that because the in the alert before the ajax call x has a value that is different from the one showed in the alert inside the success function. Where I am wrong?

score 1 · Answer 1 · answered Feb 11 '14 at 15:41

All the anonymous functions passed to success in $.ajax reference the same x variable from the outer scope which is incremented by the for structure. You need each function to have it's own copy of x.

success:function(copy_x) {
  return function(result){
    //$("#tr"+copy_x).fadeOut("slow");
    alert("#tr"+copy_x); 
  }
}(x),

score 0 · Answer 2 · edited May 23 '17 at 12:29

It is because your are using the loop variable x in a closure within the loop.

$("#acquisto").click(function () {
    for (var x = 0; x < numRighe; x++) {
        (function (x) {
            if ($("#ch" + x).prop("checked") == true) {
                alert("#tr" + x);
                $.ajax({
                    url: "eliminazioneRecord.php",
                    type: "GET",
                    data: {
                        Codice: $("#ch" + x).val()
                    },
                    success: function (result) {
                        //$("#tr"+x).fadeOut("slow");
                        alert("#tr" + x);
                    },
                    error: function (richiesta, stato, errori) {
                        alert("<strong>Chiamata fallita:</strong>" + stato + " " + errori);
                    }
                });
            }
        })(x)
    }
});

Read:

Variable in JQuery changes

2 Answers2