Onclick for for 루프

Question

왜 이런 일이 발생하는지 모르겠다. 숫자 (Object.size (페이지 매김))를 반복하고 각 번호에 대해 onclick 이벤트를 설정하고있다. 버튼 중 하나를 클릭하면, 클릭 한 페이지 대신 마지막으로 사용 가능한 페이지 번호가 표시됩니다.

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); 
    }); 
} 

도 잘 삽입되는 숫자와 클래스,

https://gyazo.com/92c556117bbd42bb7a16e7832b60af39

Answer 1

는 클로저를 만들 필요가 보인다.

것은 인생

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 
}