DOM 조작 후 Javascript가 무효화됩니다.

Question

내 페이지에는 Javascript에 의존하는 두 개의 구성 요소가 있습니다. 왼쪽에는 속성 기본 탐색 (abn)이 있습니다. 그리고 오른편은 이상의 결과입니다.

abn에 대한 이벤트 핸들러와 결과에 대한 이벤트 핸들러가 있습니다 (둘 다 클릭 중임) 사용자가 abn를 클릭 할 때마다 html 결과가 값인 json 객체를 반환하는 ajax 호출을 수행합니다 키/값 쌍 중 하나의 HTML이 결과 구성 요소에 삽입되고 있습니다.

페이지 결과에 대한 이벤트 처리기는 페이지 새로 고침시 올바르게 작동합니다. 그것은 ajax 호출 후 html 콘텐츠를 결과 슬롯에 삽입 할 때 작동하지 않습니다. 나는 결과에 모든 div와 클래스가 있다는 것을 확인했다.

내가 HTML 콘텐츠를 바꿀 때 자바 스크립트 처리기가 작동을 멈추는 것 같아요. 누군가 이것이 왜 이런 일이 일어나고 어떻게 해결할 수 있는지 설명 할 수 있습니까?

Answer 1

동일한 ID (중복 ID)를 가진 요소를 삽입 했습니까?

Answer 2

어떻게 결과의 html 콘텐츠를 대체 하시겠습니까? 내 생각 엔 페이지가로드 될 때 정의 된 이벤트 핸들러가 있지만 dom 요소를 이벤트 핸들러가없는 새 DOM 요소로 겹쳐 쓰는 것입니다. 그러나 나는 더 많은 것을 알기 전에 몇 가지 코드를 보거나 더 많은 설명을해야합니다 .-

Answer 3

div가 아닌 클래스입니다. 그리고 그들은 같은 학급을 가지고 있습니다. 이벤트 처리기가 결과의 일부가 아닙니다. 결과가 맨 위에있는 동안 javascript는 페이지 하단에 있습니다. 그래서 javascript는 거기 sitll입니다. 그들은 대체되지 않습니다.

Answer 4

새 데이터로 HTML을 업데이트 할 때 이전에 가지고 있던 이벤트 처리기를 다시 부착합니까?

이전에는 이벤트 핸들러가 있었지만 지금은 변경되지 않았을 가능성이 있습니다.

Answer 5

innerHTML을 사용하여 DOM을 조작하면 핸들러가 연결된 실제 요소를 대체 할 때만 이전에 설정 한 이벤트 핸들러를 zaps 처리하는 것과 비슷한 동작을 보았습니다. 이는 인라인 이벤트 핸들러 속성과 Javascript를 통해 연결된 "적절한"이벤트 핸들러에 해당합니다.

이 문제가 발생하는지 테스트하는 가장 좋은 방법은 abnormal을 클릭 할 때 호출되는 함수에 디버그 문을 추가하는 것입니다. 디버거를 사용하지 않는 경우 (작동)

function iAmCalledWhenSomeoneClicksOnAbn(){ 
    alert("I was called, w00t!"); 
    //...rest of function 
} 

첫 번째 클릭 당신에게 경고를 줄 것을 그냥 경고를 추가 (다음 자바 스크립트 디버거를 사용하여 조사). 두 번째 클릭 (작동하지 않는)이 경고를 건너 뛰면 DOM 조작으로 이벤트 처리기가 제거된다는 것을 알 수 있습니다.

두 번째 클릭으로 경고가 계속 표시되는 경우 다른 문제가 있습니다. 가장 많이 발생하는 원인은 실행을 중단시키는 처리되지 않은 Javascript 예외입니다. 브라우저 (Firefox/Firebug, IE/Visual Studio Express 웹 개발자, Safari/Drosera) 용 디버거를 다운로드하고 예외가 발생할 때까지 실행 경로를 따라 가거나 DOM 조작이 발생해야하는 코드 영역으로 이동하십시오. 나중에 도달하면 DOM의 현재 내용뿐만 아니라 모든 변수의 내용을 검사하여 예상되는 DOM 조작이 일어나지 않는 이유를 확인하십시오.

Answer 6

div가 아닌 클래스입니다. 그리고 그들은 같은 학급을 가지고 있습니다.이벤트 핸들러는 결과의 일부가 아닙니다. 결과가 맨 위에있는 동안 javascript는 페이지 하단에 있습니다. 그래서 javascript는 거기 sitll입니다. 그들은 대체되지 않습니다.

.innerHTML을 통해 요소를 새 요소로 바꾸면 페이지 하단의 JavaScript가 다시 실행되지 않습니다. HTML 속성 (레벨 0) 대신 JavaScript (레벨 2)를 사용하여 이벤트 핸들러를 추가하는 경우 사용자가 처음 페이지를 방문 할 때만 핸들러가 추가됩니다. 새 DOM 요소를 페이지에 배치 할 때마다 해당 코드를 호출해야합니다.

물론이 답변은 완전히 벗어난 것일 수 있습니다. 우리가 코드 샘플을 주 었는지 알 수 있습니다.