동적으로 생성 된 요소에 대한 이벤트 수신기

Question

어떻게 동적으로 생성 된 요소에 이벤트 수신기를 제공합니까? 아래 예제에서이 코드가 모두 실행되면 term_num 변수가 하나씩 (term_num ++) 증가하므로 #abtn click 이벤트가 호출 될 때마다 새로운 div 요소 "term_ [term_num]"이 만들어집니다. 이 새로운 div 각각에 클릭 이벤트 리스너를 어떻게 제공합니까?

$(document).ready(function() { 
$("#abtn").click(function(event) { 
     var newterm = '<div id=\'term_'+term_num+'\'>'+term+' </div>'; 
     var term = document.getElementById("term_input").value; 
     $('#terms').after(newterm); 

Answer 1

당신은 .on()와 사전에 등록 할 수 있습니다 직접 기능 Live demo (click).

$(document).on('click', 'some-selector', function() { 

}); 

를하거나 추가하기 전에 DOM 요소 newTerm를 작성하고 첨부 : Live demo (click).

var $newTerm = $(newTerm); 

$newTerm.click(function() { 

}); 

을

S 요소에 추가하는 선택기가 동적 ID이므로 여기에서 두 번째 방법을 사용하는 것이 좋습니다. .on을 위임 할 수 있도록 생성 된 요소에 클래스를 추가하려면 .on을 사용하십시오. 더 효율적입니다.

Answer 2

클래스를 생성하는 동안 클래스를 추가하십시오.

var newterm = '<div class="termsDiv" id=\'term_'+term_num+'\'>'+term+' </div>'; 

동적으로 요소를 만들려면 Event Delegation을 사용해야합니다. 위임 이벤트 방식을 사용하여 .on()을 사용해야합니다.

즉

$(document).on('event', 'selector', callback_function) 

예

$(document).on('click', '.termsDiv', function(){ 
    //Your code 
    alert("clicked me"); 
}); 

document 대신에 당신이 가장 가까운 정적 컨테이너를 사용해야합니다.

당신이 위임 된 사건들이 나중에 문서에 추가되는 하위 요소의 이벤트를 처리 할 수있는 장점이 Attribute Starts With Selector [name^="value"]

$(document).on('click', 'div[id^="term_"]', function(){ 
    //Your code 
    alert("clicked me"); 
}); 

을 사용할 수 원하는 경우. 위임 된 이벤트 핸들러가 첨부 된 시간에 존재하도록 보장 된 요소를 선택하면 위임 된 이벤트를 사용하여 click 이벤트를 동적으로 생성 된 요소에 바인딩하고 자주 이벤트 핸들러를 첨부 및 제거하지 않아도됩니다.