JQuery, 동적으로 추가된 dom element(태그)에 onclick이 인식 안되는 경우 해결 방법

 

onclick이 인식 안되는 경우

.on() 메소드는 DOM element에 이벤트를 바인딩 하는데 쓰인다. 

하지만, 동적으로 추가된 요소에 대해서는 이벤트가 바인딩 되지 않는다. 

 

 

아래 소스를 예로 들면

 

$(document).ready(function () { 

   $('#btnAdd').on('click', function(){ 

    $('<div>Dynamic Div</div><br/>').appendTo('body'); 

  }); 

  $('div').on('click', function() { 

    console.log("Clicked."); 

  }); 

});

 

btnAdd 라는 태그를 클릭했을 때 div가 추가되는데, 

새로 추가된 div 태그를 클릭하면 바로 아래 onclick 이벤트가 실행되지 않는다.

 

최초에 페이지를 로딩할 때 해당 태그가 없어서 이벤트가 바인딩 되지 못했기 때문이다.

document를 참고해도 최초에 element가 없었기 때문인걸 알수 있다.

 

"Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()."

 

그렇다면 어떤 동작을 통해 동적으로 태그가 추가되고, 

새로 추가된 태그에 이벤트 핸들러를 바인딩할 방법은 없을까?

 

 

해결 방법

위 예제 소스 처럼 특정 태그에 .on()을 지정해주는 것을 'Direct event'라고 부르는데, 

조금 다른 방식인, 'Delegate event' 방식으로 해결이 가능하다. 

 

'Delegate event' 방식은 직접 이벤트를 element에 지정하는 방식이 아니라 

부모 element가 자식에게 이벤트를 지정해주는 방식이다.

 

이 방식으로 이벤트를 주기 위해서는 .on() 메소드에 selector를 넘겨주면 된다.

.on(events [, selector ] [, data ])

selector에는 자식 element를 지정해주면 된다.

 

 

아래 소스를 예로 들면,

 

$(document).ready(function () {

   $('#btnAdd').on('click', function(){

    $('<span> Span 3 </span>').appendTo('#dvParent');

  });

 

  $("#dvParent").on("click", "span", function(){

    console.log("Clicked.");

  });

});

 

<div id="btnAdd">button</div>

 

<div id="dvParent">

    <span> Span 1 </span>

    <span> Span 2 </span>

</div>

 

button 이라는 버튼을 클릭하면 새로운 span이 추가 되고,

부모가 자식에게 click 이벤트를 Delegate 시켜주게 된다.

 

이제 span 태그를 클릭하면 onclick 이벤트가 실행되고

console.log("Clicked."); 가 실행되어 Clicked.가 콘솔에 찍히게 된다.