동적으로 추가 된 요소에 이벤트 리스너를 추가하는 Jquery

동적으로 추가 된 요소에 이벤트 리스너를 추가하는 Jquery [중복]

---

이 질문에 이미 답변이 있습니다.

• 이벤트 처리기가 동적 콘텐츠에서 작동하지 않음 [중복] 2 개의 답변

그래서 지금은 동적으로 추가 된 요소에 이벤트 리스너를 연결하려면 요소를 추가 한 후 리스너를 재정의해야한다는 것을 알고 있습니다. 이것을 우회하는 방법이 있습니까? 그래서 전체 추가 코드 블록을 실행할 필요가 없습니까?

---

를 사용 .on()하면 함수를 한 번 정의 할 수 있으며 동적으로 추가 된 모든 요소에 대해 실행됩니다.

예를 들면

$('#staticDiv').on('click', 'yourSelector', function() {
  //do something
});

---

$(document).on('click', 'selector', handler);

click이벤트 이름은 어디에 handler있고 함수 또는 익명 함수에 대한 참조와 같은 이벤트 핸들러입니다.function() {}

추신 : 동적 요소를 추가하는 특정 노드를 알고 있다면 대신 지정할 수 document있습니다.

---

이러한 요소를 동적으로 생성하므로 페이지로드시 적용된 리스너를 사용할 수 없습니다. 올바른 해결책으로 바이올린을 편집했습니다. 기본적으로 jQuery는 이벤트를 부모 요소에 연결하고 동적으로 생성 된 올바른 요소로 전파하여 나중에 바인딩 할 이벤트를 보유합니다.

$('#musics').on('change', '#want',function(e) {
    $(this).closest('.from-group').val(($('#want').is(':checked')) ? "yes" : "no");
    var ans=$(this).val();
    console.log(($('#want').is(':checked')));
});

http://jsfiddle.net/swoogie/1rkhn7ek/39/

---

jquery 플러그인 호출로 새 요소를 추가 할 때 다음과 같이 할 수 있습니다.

$('<div>...</div>').hoverCard(function(){...}).appendTo(...)

참고 URL : https://stackoverflow.com/questions/12065329/jquery-adding-event-listeners-to-dynamically-added-elements