[ 동적으로 생성된 태그에 이벤트 걸기 ]
- 없던게 동적으로 생성된건, DOM에서 인식을 제대로 못한다.
- 생성될 태그에 거는 이벤트라고 명시적으로 써줘야 한다.
$("#btnclick").on("click",function(){
$("#keyout").html( ++count + " 번 클릭했습니다. " );
$("#newbuttons").append
("<input type='button' value ='new_button" + count + "' id = 'newbut' >"); });
: 버튼클릭할때마다 value 값 가진 버튼 생성
$("생성되는 동적태그의 부모태그").on( "이벤트종류", "생성될 동적태그", 함수 );
$("#newbuttons").on("click", "input:button", function(){
$("#keyout").html($(this).val());
=> 부모태그 newbuttons 태그에 이벤트를 걸어야 한다.
: "부모태그에 생성될" input:button 들을 클릭하면 function 하겠다
[ 이벤트 지우기 ]
[ empty( ) ]
: 해당태그 내용을 지우는 것
$("#btnstop").on("click",function(){
$("#newbuttons").html("");
// 이렇게 innerHTML 내용을 공백을 줘서 지워주는 것과 같은 효과
$("#newbuttons").empty();
[ remove( ) ]
: 해당 태그를 지우는 것
$("#newbuttons").remove();
// 말그대로 해당 태그를 지워버린다.
=> 조건을 걸어두고, 처음엔 이벤트 발생시키다가
이제 안일어나게 하고싶을때
RemoveEventListener 처럼 사용할 수 있겠다.