동적으로 추가한 요소 이벤트 동작하지 않을때 해결방법

먼저 아래와 같은 상황이 있다고 가정해보자.

특정버튼(#button1) 클릭이벤트 발생 시

동적으로 div(#div2)를 하나 생성하게 해놨다.

그리고 div(#div2) 클릭이벤트 발생 시 alert창이 뜨도록 해놨다.

대략적인 코드는 아래와 같다.

$(document).ready(function() {

$('#button1').click(function() {

$('#div1').append('<div id="div2"></div>');

});

$('#div2').click(function() {

alert(1);

});

});

위 코드의 목적은 button1 이라는 id를 가진 엘리먼트를 클릭하면

div1 이라는 id를 가진 엘리먼트 아래에 div2라는 id를 가진 div태그를 하나 생성한다.

그리고 동적으로 생성된 div2태그를 클릭하면 alert창을 띄우는 것이다.

하지만 div2가 생성은 되지만 클릭해도 alert창이 뜨질 않았다. (아예 이벤트 발생자체를 안한다)

이럴 경우 delegate, live, on 세가지를 사용하여 해결할 수 있다.

향후 버전에서 on으로 통합될 예정이라고 하니 on을 통해 해결하는 코드를 보이겠다.

$(document).ready(function() {

$('#button1').click(function() {

$('#div1').append('<div id="div2"></div>');

});

$(document).on('click', '#div2', function() {

alert(1);

});

});