jquery click event (선택자 1개 vs 2개)

$("#id").on('click', function(){ ... });      vs     $("#id").on('click', '.class', function()){ ... });

 

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

위의 경우로 사용할 경우, element가 나중에 생긴 경우에는 위의 click 이벤트 적용이 되지 않는다.
(나중에 생긴 경우 ex) - append()로 추가된 엘리먼트...) 
​

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

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

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

 

주의할 점은 동적으로 생긴 엘리먼트를 click 뒤에 작성해야 한다. 

 

 

--------------------------------------------------------------------------------------------------------------------------------

 

 

그러나, 문제가 하나 있다. 위와 같이 걸 경우, 페이지를 새로고침 하거나 한번 실행이 될때마다 click 이벤트가 계속 등록이 되어서

나중에는 click 이벤트가 여러번 실행되는 현상이 발생한다.

​

그걸 방지하기 위해서는 

 

1. off를 이용

$("#id").off().on('click', id, function() {}

 

2. return false 를 사용

$("#id").off().on('click', id, function() {

   return false;

}

 

3. .stopPropagation()

현재 이벤트가 부모에게 전파되지 않도록 중지

 

4. .preventDefault()

현재 이벤트 기본 동작 중지

 

5. .stopImmediatepropagation()

현재 이벤트가 부모와 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중지

동일한 하나의 버튼에 이벤트가 여러 개 걸려 있을 때, 이 메소드를 쓴 이벤트만 발생하고 나머지 이벤트는 발생하지 않는 것.