일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
Tags
- jQuery 이벤트
- STS 설치
- casting
- 파이썬 end
- jquery focus()
- 파이썬 sep
- jquery blur()
- JQuery
- 형 변환
- 리눅스 명령어
- jquery .on
- SCOPE
- 자바 메서드
- vim 편집기
- vim 명령어
- puttyp
- jquery 이벤트 삭제
- Jquery event
- jquery 생성된 요소에 이벤트 등록
- 객체지향
- 자바 변수
- 푸티
- 파이썬 출력
- 파이썬 공백 출력
- 파이썬 공백
- 파이썬 join
- dbeaver
- 파이썬 리스트
- 자바 환경변수
- jquery .off
Archives
- Today
- Total
달밤에 코딩
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'인 요소 (특정타겟) 에 걸어준다.
반응형
'Front-End > jQuery' 카테고리의 다른 글
jQuery : focus(), blur() 이벤트 (0) | 2022.06.06 |
---|---|
jQuery 이벤트 등록, 삭제 (0) | 2022.06.03 |
jQuery 기초 빠르게 훑기 (0) | 2022.06.02 |
Comments