jQuery : 동적으로 붙인 요소 + .on()

Question

나는 클래스의 HREF 시리즈를 보유하고 있습니다. 다음과 같이 클릭 할 때이를 무시합니다.

$('.buy').on('click', function (e) { 
    e.preventDefault(); 
    var me = $(this); 
    // other stuff here... 

예상대로 작동합니다. 이러한 링크를 DOM에 동적으로 추가하면 문제가 발생합니다. 이 링크를 클릭하면 캡처되지 않습니다. .on() 메서드를 사용하는 바인딩은 JS가로드 될 때 DOM에없는 항목과 함께 작동한다고 생각했습니다.

확실하지 않은 이유는 무엇입니까? .on과 함께 표준 클릭 캡처를 사용하면 예상대로 작동하지 않습니다.

Answer 1

$(document).on('click', '.buy', function(e){ 
    e.preventDefault(); 
    var me = $(this); 
    // other stuff here... 
}); 

이벤트는 정적 요소로 위임되어야하며, 두 번째 인수는 함수를 실행하려는 선택기입니다.

길을 계속 유지하면서 페이지로드에 바인딩 된 정적 요소에 연결하지 않습니다.

Answer 2

너무 .target 기능을 사용할 수 있습니다 :

$(document).on('click', '.buy', function(e){ 
    e.preventDefault(); 
    var me = $(e.target); 
    alert(me.attr('id')); 
}); 

이 하나의 시험 만 작동 할 수 없습니다 :

$('.buy').on('click',function(e){  
    e.preventDefault(); 
    var me = $(e.target); 
    alert(me.attr('id')); 
});