최대한 간략하게 설명해보면 다음과 같은 케이스가 있다
//html
<div id="base">
</div>
//javascript
$('#somethingBtn').click(function () {
$("#base").append("<div class'new'> bla bla </div>");
})
$('.new').click(function() {
//not working!!!!!
});
1. base id를 갖는 div는 현재 비어있다
2. 어떤 버튼(somethingBtn)을 클릭하면 base 밑으로 .new 라는 class를 가진 엘리먼트가 들어간다
3. '.new'로 이벤트를 달아놨기때문에 이벤트가 먹힐꺼라고 생각한다
4. 안먹힌다
조금 극단적인 예이지만 필자의 경험상 이벤트가 안먹힌다.
해결방법은 간단하다
$('#base').on('click', '.new' ,function() {
//bla bla ...
});해당 엘리먼트에 이벤트를 바로 연결하지말고 append 되는 상위 엘리먼트에 on 으로 이벤트를 걸어준다
on()과 delegate() 등등의 자세한 정보를 알고싶다면
https://hohoya33.tistory.com/44 를 참고해도 좋을 듯 하다
이벤트는 항상 on()으로 거는걸 추천한다
https://stackoverflow.com/questions/15420558/jquery-click-event-not-working-after-append-method
Jquery click event not working after append method
So I have this button which adds a new row to the table, however my problem is that it does not listen to the .new_participant_form click event anymore after the append method has taken place. htt...
stackoverflow.com
'javascript & jquery' 카테고리의 다른 글
| [jQuery] 클릭한 td에 alert (0) | 2018.11.28 |
|---|
