on("click") vs click()

on("click") 과 click()의 차이점은 동적으로 이벤트를 바인딩할 수 있는지의 차이다. 

on("click")은 동적으로 가능하고 click()은 최초에 선언된 element에만 동작한다.

 

1_click()이벤트

<ul id="myTask">
	<li>MENU1</li>
    <li>MENU2</li>
    <li>MENU3</li>
</ul>

위 코드에서 아무 li 태그에 click()이벤트를 발생시키면

$("#myTask").children().click(function(){
	$(this).remove();
});

해당 li태그가 remove()된다.

여기서 아래 소스처럼 동적으로 새로운 li태그를 추가한 뒤 click()메소드를 실행하면 동작하지 않는다. 왜냐하면 click()이벤트는 최초에 페이지를 로딩할 때 선언되어 있던 element에 이벤트를 바인딩하고 나서는 더이상 동적으로 바인딩을 하지 않기 때문이다.

$("#myTask").append("<li>new Menu</li>");

 

 

2_on("click")이벤트

on("click") 이벤트를 사용하면 동적으로 이벤트를 바인딩 시킬 수 있다.

$("#myTask").on('click','li',function(){
	$(event.target).remove();

});

즉, myTask 아래에 추가되는 태그는 모두 부모의 on("click")이벤트를 물려 받게 된다.