자바 스크립트로 동적 onclick 이벤트 생성

Question

alert()이 가장하는 루프의 번호와 연결된 onclick 이벤트 시리즈를 동적으로 생성하고 있습니다. 내 문제는 현재 경고가 척하는 콘텐츠와 관련된 i 번째 루프가 아니라 마지막 루프의 'i'값을 출력한다는 것입니다. 이견있는 사람?

자바 스크립트 :

for (i = 1; i < 4; i++) { 

    prepend_content = '<a href="#" id="img1_link_' + i + '" onclick="alert(i);">foo</a>'; 
    $('#dynamic_div').prepend(prepend_content); 

} 

많은 감사합니다. 확실히 그들은 세계에 누설하지 않습니다 할 경우 당신이 이미하지 않은에서

for (i = 1; i < 4; i++) { 
    prepend_content = '<a href="#" id="img1_link_' + i + '" onclick="alert(' + i + ');">foo</a>'; 
    $('#dynamic_div').prepend(prepend_content); 
} 

당신은 (var와) i 및 prepend_content를 선언 할 수 있습니다 : 당신이 전에처럼

Answer 1

그것을 연결 시도 범위.

동시에 HTML을 사용하거나 HTML에 인라인 이벤트 처리기를 추가하는 것은 권장하지 않습니다. 이 같은 요소를 만들어보십시오 :

prepend_content = $("<a>").attr({ 
    href: "#", 
    id: "img1_link_" + i 
}).text("foo").on("click", (function (i) { 
    return function() { 
     alert(i); 
    }; 
})(i)); 

DEMO :http://jsfiddle.net/ujv4y/

click 핸들러에 대한 즉시 호출 함수의 추가 사용은 루프에서 i의 값을 캡처하는 폐쇄를 확인하는 것입니다.

Answer 2

당신은 (더 복잡한 물건) 경고에 대한 무두질 사용하는 함수를 만들 수 있습니다

function(i) { 
return function(){alert(i);} 
}