02. [jQuery] 동적으로 생성된 버튼의 클릭 이벤트가 되지 않을 때

보통 jQuery로 이벤트를 걸 때 $(id). click(function(){ }); 형태로 많이 사용합니다.

위의 경우로 사용할 경우, element가 나중에 생긴 경우에는 위의 click 이벤트 적용이 되지 않는 문제가 발생합니다.

 

그럴 때 필요한 코드가 다음과 같습니다.

$(document).on('click', id, function)

다음과 같이 작성하면 element가 나중에 동적으로 생성되었다 하더라도, 이벤트가 동작하게 됩니다.

---

예제 코드

<div class="btnBox">
    <button type="button" id="btn1">버튼 #1</button>
</div>

 

 

버튼 1의 클릭 Function

btn1을 클릭했을 때 btnBox안에 btn2를 생성한다.

$("#btn1").click(function(){
    $(".btnBox").append('<button type="button" id="btn2">버튼 #2</button>');
});

 

 

동적으로 생성된 버튼 2의 Function 

그러고 나서 아래 코드를 추가해줘도 btn2를 클릭했을 때는 아무런 반응이 없다.

$("#btn2").click(function(){
    alert('클릭안됨');
});

 

 

해결방법

동적 버튼을 클릭하는 방법

$(document).on("click", "#btn1", function(){
    alert('클릭됨');
});