JQuery 클릭 이벤트 on("click") 과 click() 의 차이

 

JQuery on("click")과 click()

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

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

 

 

아래 예제 소스로 차이점을 알아보자.

 

<ul id="myTask"> 

  <li>Coding</li> 

  <li>Answering</li> 

  <li>Getting Paid</li> 

</ul> 

 

 

jQuery click() 이벤트

위 예제 소스에서 아무 li 태그나 클릭하면 아래 함수가 실행된다.

 

$('#myTask').children().click(function () { 

  $(this).remove(); 

}); 

 

그러면 클릭한 li 태그에 바인딩된 click 이벤트가 실행되어 해당 li 태그가 remove() 될 것이다.

 

 

여기서 아래 소스 처럼 동적으로 새로운 li 태그를 추가한 뒤,

 

$('#myTask').append('<li> New li tag </li>'); 

 

새로 추가된 "<li> New li tag </li>" 를 클릭하면 click() 메소드는 동작하지 않는다.

 

왜냐하면 click() 이벤트는 최초에 페이지를 로딩할 때 선언되어 있던

element에 이벤트를 바인딩하고 나서는 더이상 동적으로 바인딩을 하지 않기 때문이다.

 

 

jQuery on("click") 이벤트

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

 

아래 예제 소스 처럼 부모 태그인 'myTask'의 이벤트를 자식 태그인 li 들에게

delegate 시키는 방식으로 메소드를 구현하면 동적으로 추가된 태그에게 이벤트를 줄수 있다.

 

$('#myTask').on('click', 'li', function(event) { 

  $(event.target).remove() 

}); 

 

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

 

여기서 아래 소스 처럼 동적으로 새로운 li 태그를 추가한 뒤,

 

$('#myTask').append('<li> New li tag </li>'); 

 

 

새로 추가된 "<li> New li tag </li>" 를 클릭하면 .on("click") 이벤트가 동작하여 해당 태그는 remove() 된다.