Javascript 이벤트 핸들러를 Ajax HTML 응답에 바인딩 하시겠습니까?

Question

위의 코드에서

document.getElementById('inner').onclick = function() {alert(this.innerHTML);} 
document.getElementById('outer').onclick = function() { 
/* An Ajax Call where the response, which will be a string of HTML content, then goes into document.getElementById('outer').innerHTML */ 

document.getElementById('inner').onclick = function() {alert(this.innerHTML);} 

} 

, 내가 기대하고, 내가 지금처럼 이벤트 핸들러를 연결하는 자바 스크립트를 사용하여,의 내가 내 HTML 페이지의 마지막에 다음 HTML 코드

<div id="outer"> 
<div id="inner">Hello World</div> 
</div> 

있다고 가정 해 봅시다 <div id="inner">Hello World 2</div> 다시 올리려면 onclick 이벤트 처리기를 다시 연결해야합니다. 이것은 새로운 응답이 되돌아 오기 때문에 의미가 있습니다. DOM으로 변환 한 후에도 DOM으로 변환 한 후에도 이벤트 핸들러가 필요하다는 것을 브라우저에 알려야합니다.

제 질문은 이벤트를 관리하는 더 좋은 방법입니다. HTML 콘텐츠가 포함 된 AJAX 응답의 처리기 HTML 응답 내에서 인라인 자바 스크립트를 사용할 수는 있지만 비 침입 자바 스크립트를 얻을 수 없습니다. 그래서 비 침투성 자바 스크립트와 아약스 html 응답의 이벤트 핸들러를 "유지"하는 효율적인 방법을 얻을 수있는 방법이 있습니까?

Answer 1

jQuery live과 같은 것을 사용할 수 있습니다. 선택기와 현재 일치하는 요소에 이벤트 처리기를 바인딩 할 수 있습니다.

Answer 2

Ben Nolan은 "Behavior"라고 불리는 멋진 프레임 워크를 만들었습니다. 그는 그 후 그것을 버렸지 만 그 생각은 여전히 ​​건전합니다. 아이디어는 CSS 선택기를 사용하여 명명 된 속성 아래에서 이벤트 핸들러를 "시트"(자바 스크립트 객체 만)에 넣는 것이 었습니다.

당신은 이와 같은 객체를 사용할 수 있습니다

{ 
    '#inner': function() { ... } 
} 

일반적인 기능을 같은 개체의 속성을 반복 할 수있는 이벤트 핸들러를 다시 적용 필요한 경우.

여기에 저장된 동작의 이전 복사본이 있습니다 : http://www.kruse-net.dk/javascript/lib/behaviour-1.2.js 당신이 영감을 얻거나 자유롭게 사용할 수 있습니다.