일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 참조키
- WeNews
- 2 > /dev/null
- querydsl
- AuthenticationEntryPoint
- application.yml
- MySQL
- 포트
- subquery
- 외부키
- ㅔㄴ션
- 메소드명
- 검색
- 네이티브쿼리
- 커밋메세지수정
- appspec
- appspec.yml
- EC2
- 컨테이너실행
- 테스트메소드
- 추후정리
- docker명령어
- ubuntu
- foreignkey
- 적용우선순위
- Query
- 예약
- 테스트
- 메세지수정
- 서브쿼리
- Today
- Total
제뉴어리의 모든것
JQuery 클릭 이벤트 on("click") 과 click() 의 차이 본문
결론 :
on("click") 과 click() 의 차이점은 동적으로 이벤트를 바인딩할 수 있는지의 차이다.
on("click")은 동적으로 가능하고 click()은 최초에 선언된 element에만 동작한다.
on("click") 과 click() 의 차이점은 동적으로 이벤트를 바인딩할 수 있는지의 차이다.
on("click")은 동적으로 가능하고 click()은 최초에 선언된 element에만 동작한다.
아래 예제 소스로 차이점을 알아보자.
<ul id="myTask">
<li>Coding</li>
<li>Answering</li>
<li>Getting Paid</li>
</ul>
- 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에 이벤트를 바인딩하고 나서는 더이상 동적으로 바인딩을 하지 않기 때문이다.
-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() 된다.
'jquery' 카테고리의 다른 글
열린 modal창 닫기 (0) | 2021.04.13 |
---|---|
Javascript - JQuery를 이용해서 Input 값 변경 실시간 감지 (0) | 2021.03.29 |
jquery id 하위 태그 가져오기 (0) | 2021.03.25 |
javascript/jquery에서 id, name, class 값 가져오기 (유용) (0) | 2021.03.18 |
업로드할 이미지 파일 미리보기 (0) | 2021.03.18 |