본문 바로가기

JAVA&JQUERY

JQUERY , $().on(click)과 click이벤트 차이 , append, remove 함수 설명

이렇게 버튼 추가 html 코드가 있고
버튼 클릭 시 새로운 버튼 하나를 생성하는 jquery 코드

여기서 append란 새로운 요소를 추가해주는 것으로 

jquery로 작성한 html 코드를 card-header 클래스안에 추가해준다.

[버튼 추가] 버튼 클릭전
클릭시 새로운 뉴버튼 생성

하지만 버튼 추가 버튼을 계속 클릭하면 계속 뉴버튼이 생성된다.

뉴버튼 그림자 분신술

보통에 경우 동적으로 생성하는 코드를 짤 때 이따위로 여러번 생성되는 일은 없을 것이다.

버튼을 생성하기전 remove 함수를 써서 지워버린다.

remove함수를 써서 있든 없든 지우고 생성해야 여러 개가 생성될 일이 없다.

자 이제 jquery on click 이벤트랑 click 이벤트 차이를 알아보자

동적으로 생성된 버튼 클릭 시 알림창을 띄우고 싶다.

하지만 어째서인지 alert창이 나오지 않는다.

이유는 .click 이벤트는 html에서 이미 작성한 코드만 이벤트가 걸리기 때문

성공적으로 alert창이 화면에 나왔다.

document를 쓰지않고 해당 버튼의 아이디를 입력 시 alert창이 나오지 않았다.

동적으로 생성된 아이디는 적용이 안된다고 한다.

click말고도 mouseover, change 등 여러 이벤트를 할 수 있다.