jQuery를 사용하여 동적으로 추가된 요소에 이벤트 수신기 추가

jQuery를 사용하여 동적으로 추가된 요소에 이벤트 수신기 추가

이 질문에는 이미 다음과 같은 답변이 있습니다.

동적 컨텐츠에서 이벤트 처리기가 작동하지 않음 (2개 답변)

닫힘8년 전에.

그래서 지금은 동적으로 추가된 요소에 이벤트 리스너를 첨부하려면 요소를 추가한 후 리스너를 다시 정의해야 한다는 것을 알고 있습니다.

추가 코드 블록 전체를 실행할 필요가 없도록 우회할 수 있는 방법은 없습니까?

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

예를들면

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

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

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

PS: 동적 요소를 추가하려는 특정 노드를 알고 있다면 대신 지정할 수 있습니다.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 plugin 호출로 새 요소를 추가할 때 다음과 같이 할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/12065329/adding-event-listeners-to-dynamically-added-elements-using-jquery