jQuery 나중에 생성된 요소에 이벤트 등록

 

 

$("#btn").on("click",function(){ 
		$("body").append("<button class='newBtn'> click </button>");
		$("body").append("<button class='newBtn2'> click2 </button>");
});


// 위에 이벤트로 생성된 class='newBtn' 인 버튼에 이벤트 등록
$('.newBtn').click(function(){
		alert('click!!');
})

이렇게 이벤트를 등록하게 되면 class='newBtn'인 버튼('click' 버튼)을 클릭했을 때 alert 창은 뜨지 않는다.
최초에 html을 읽을 때 class='newBtn'인 버튼이 없기 때문이다. 

즉, 나중에 생긴 요소는 제어하기 힘들다는 단점이 있다.

 

그러면 나중에 생긴 요소에 이벤트를 걸 때는 어떻게 해야할까?

1. onclick 활용

$("#btn").on("click",function(){
    $("body").append("<button class='newBtn' onclick='clickEvt()'> click </button>");
});

버튼 속성에 onclick='실행할 함수()' 을 설정해준다.

//1. onclick 활용
function clickEvt(){
    alert('click!!');
}

실행할 함수를 작성해준다.

 

 

2. document 에 click 이라는 이벤트를 특정 타겟에게 걸어준다.

$("#btn").on("click",function(){
    $("body").append("<button class='newBtn2'> click2 </button>");
});

버튼 생성 이벤트 설정

//2. document 에 click 이라는 이벤트를 특정 타겟에 걸어준다.
$(document).on('click','.newBtn2',function(){
    alert('click!!');
});

document 에 'click'이라는 이벤트를 class='newBtn2'인 요소 (특정타겟) 에 걸어준다.