-
7. JQuery 이벤트로 생성된 버튼에 이벤트 주기JQuery 2022. 8. 30. 16:15
어떠한 이벤트로 원래 없던 버튼을 생성하여 이벤트를 줄 수 있다.
요소.append("<button>버튼</button>") 해당 요소의 자식 맨 밑에 새로운 버튼을 추가한다. * 이벤트로 생성된 버튼에 이벤트 주기 예시
<!DOCTYPE html><head><!-- 제일 먼저 읽는 영역 --><meta charset="UTF-8"><title>문서 제목</title><style>/*css 영역*/</style></head><body><!--보여지는 영역--><button id="btn">버튼 생성</button><button id="evtDel">이벤트 삭제</button></body><script>//자바 스크립트 영역//$(select).on("추가할 이벤트",실행할 함수);$("#btn").on("click",function(){$("body").append("<button onclick='clickEvt(this)'>click</button>");$("body").append("<button class='newBtn2'>click2</button>");});
//$(select).이벤트함수(실행할 함수);$("#evtDel").click(function(){$("#btn").off("click"); //id가 btn인 요소의 click 이벤트를 끈다});
//위에서 생성한 버튼에 이벤트를 줘보자//클릭하면 alert("클릭");
//화면을 뿌릴 당시에 버튼은 2개 뿐이다
//새로 생성된 요소에 이벤트 거는 방법1//on... 이벤트function clickEvt(e){alert("클릭");console.log(e); //this 는 이벤트가 일어난 당사자 요소}* 이벤트 객체를 통해 이벤트가 일어나는 모든 정보를 확인할 수 있다.//새로 생성된 요소에 이벤트 거는 방법2//document에 클릭이벤트를 거는데 class가 newBtn2인 요소$(document).on("click",'.newBtn2',function(evt){console.log(evt); //이벤트 객체 : 이벤트가 일어나는 모든 정보});
</script></html>* 일반적인 방법인 $(".newBtn2")의 클릭이벤트를 주면 작동이 하지 않는다.
* 처음에 화면에 뿌려질 때 그 버튼은 없기 때문이다.
* 따라서 1) append할 때 생성할 버튼에 처음부터 onclick 이벤트를 주고 따로 함수를 작성하거나
2) $(document)를 통하여 script가 실행될 때부터 이벤트를 주어야한다.
'JQuery' 카테고리의 다른 글
9. JQuery 속성 가져오기 (0) 2022.08.30 8. JQuery 마우스 이벤트 (0) 2022.08.30 6. JQuery 요소 검색하기 (0) 2022.08.30 5. JQuery 형제요소 가져오기 (0) 2022.08.30 4. JQuery 자식요소 가져오기 (0) 2022.08.30