AJAX에서 하위 요소에 이벤트 바인딩

Question

유지 관리 성을 향상시키기 위해 스크립트에서 동적으로 생성되는 HTML을 AJAX 쿼리 결과로 대체하려고합니다. 그러나 이벤트 처리기를 동적 ​​컨텐트에 바인딩하는 것은 드문 경우이지만 대부분의 솔루션이 부분적으로 만 작동합니다. 내가

$("#m" + event.PeerId).live("hover", function (args) { debugger; }

를 작성하는 경우가 작동하지 않고

$("#m" + event.PeerId + " sendMessage").live("click", function (args) { debugger; }

작동하는 것을 의미, 이벤트 내가 클릭 발생하지 않는 경우. 또한 루트 다운로드 요소의 호버 이벤트를 추적 할 수 있지만로드, 준비 등을 추적 할 수 없습니다. 또한 절대로 발생하지 않습니다.

로드 된 콘텐츠의 일부 하위 요소 인 버튼 클릭을 어떻게 처리 할 수 ​​있는지 알려주십시오.

Answer 1

당신이 위임 된 이벤트 핸들러 사용해야합니다 jQuery를의 최근 버전을 사용하는 경우 : IDS 모든 m로 시작하는 경우

$(document).on("click", "#m" + event.PeerId + " sendMessage", function (args) { 
    debugger; 
}); 

을하지만 대해서는 peerID 아직 모르고있다, 이것을 사용 :

를

$(document).on("click", "[id^=m] sendMessage", function (args) { 
    debugger; 
}); 

위임 된 이벤트 핸들러는 변화가없는 요소에 가까운 것이 아무것도없는 경우 기본값 인 document이 변경되지 않은 조상에 첨부되어야합니다. 그들은 선조를 버블 링 이벤트를 수신하여 작동

가 상기 하나 핸들러가 부착되어, 다음가 JQuery와 필터를 적용 이벤트 인해 각 정합 요소의 기능 부른다.

참고 : 위임 된 이벤트 핸들러에는 'body'을 사용하지 마십시오. 이벤트 발생을 유발할 수있는 스타일 관련 버그가 있으므로 절대로 사용하지 마십시오. 변경되지 않는 더 가까운 요소가없는 경우 항상 document을 사용하십시오.