Onclick inside for loop

Question

I don't know why this is happening, I am looping through a number ( Object.size(pagination) ), and setting an onclick event for each number. Upon clicking one of the buttons, it echos the last available page number, instead of the one I clicked.

for (var i = 1; i < (Object.size(window.pagination) + 1); i++) {
  $("#supportTicket_pageNumber").append("<li class=\"\"><a style=\"cursor: pointer;\" class=\"supportTicket_pageNumber_" + i + "\">" + i + "</a></li>");
  $(".supportTicket_pageNumber_" + i + "").click(function() {
    console.log("Page number: " + i);
  });
}

The classes with the numbers also get inserted fine, https://gyazo.com/92c556117bbd42bb7a16e7832b60af39

A better solution is this: `for (var i = 0; n= Object.size(window.pagination) ; i" + (i+1) + ""); } $(function() { $(document).on("click",".supportTicket_pageNumber",function() { console.log("Page number: " + $(this).data("page")); }); })` — mplungjan, Nov 15 '16 at 15:34

score 0 · Answer 1 · answered Nov 15 '16 at 15:34

Seems you need to create a closure.

Wrap it inside an IIFE

 for (var i = 1; i < (Object.size(window.pagination) + 1); i++) {
   (function(x) {  // closure start here
     $("#supportTicket_pageNumber").append("<li class=\"\"><a style=\"cursor: pointer;\" class=\"supportTicket_pageNumber_" + x + "\">" + x + "</a></li>");
  $(".supportTicket_pageNumber_" + x + "").click(function() {
    console.log("Page number: " + x);
    });
   }(i)) // end here, passing the context of i
}

Onclick inside for loop

1 Answers1