과거에는 jQuery의 바인드에 직접 이벤트를 사용했습니다. 그러나 그 당시 나는 DOM 요소를 동적으로 생성하지 않았지만 원래 이벤트 바인딩을 위해 페이지에 존재했던 DOM 요소를 생성했습니다. 최근에 동적으로 생성 된 DOM 바인딩 이벤트를 테스트했을 때 이벤트가 유효하지 않다는 것을 알았으므로 테스트했습니다.
1. 이벤트 실패의 원인 :
(1) 결합 이벤트 결합은 DOM에 존재하는 요소에만 유효하다. 나중에 동적으로 추가하는 요소에 대해서는 모니터링 할 수 없으므로 묶을 수 없습니다.
(2) 마찬가지로, var aa = document.getElementsByTagName ( "동적 생성 요소")을 사용할 때; 웹 페이지는 초기화 바인딩을 한 번만 수행하고 동적으로 생성 된 DOM 요소를 모니터링 할 수 없기 때문에 동적으로 생성 된 요소를 얻으려면.
2. 해결책 :
(1)이 블로그의 예와 같이 동적으로 생성 된 각 장소에서 더 많은 이벤트를 바인딩합니다.
(2) 라이브가 실시간으로 모니터링되고 새로 추가 된 DOM 요소에도 효과적이기 때문에 라이브로 바인딩 된 변화 (웹 성능 문제에 영향을 줄 수 있기 때문에).
(3) Delegate가 실시간으로 모니터링되기 때문에 변경 사항 변경 대의원에게 바인드.
(4) jQuery1.7에서, bind (), live () 및 delegate () 메소드가 ON으로 대체되었습니다.
3. 최근 이벤트 실패의 이유와 관련하여 : 원본 웹 페이지에서 (코드는 https://github.com/ufowl/mas 이벤트 바인딩을 초기화 할 때 얻은 테이블의 버튼은 이미 비어 있으므로 바인딩 요소는 항상 비어 있으므로 버튼 버튼을 클릭 할 때 응답이 없습니다.
4. 최종 솔루션 : 먼저 테이블을 가져온 다음 테이블의 클릭 이벤트를 바인딩 한 다음 (테이블이 이미 존재하는 DOM 요소에 있기 때문에) 이벤트의 대상을 캡처합니다 (예 : 테이블의 버튼을 클릭하십시오.이 시간에 버튼이 동적으로 생성되어 테이블에 추가되기 때문에 대상이 버튼에 반영).
참고 : 여기에는 두 가지 문제가 있습니다.
(1) 테이블의 요소가 테이블에 추가되었으므로 해당 버튼을 클릭하면 원하는 버튼이 원하는 버튼입니다.
(2) 버튼이 테이블에 추가 된 이유는 무엇입니까? 그러나 여전히 얻을 수 없습니까? init () 함수가 초기화 될 때 테이블의 버튼이 얻어 지지만 현재로서는 작동이 수행되지 않았으므로 얻은 내용은 비어 있으므로 요소가 바인딩되지 않습니다.
위의주의를 기울여야하는 두 가지 문제는 명확하게 구별되어야하며 이것이 문제의 핵심입니다.
5. 바인딩에 관한 것 : 각 바인딩 이벤트 후에 이벤트가 구속됩니다. undind에 rebind, 그렇지 않으면 이벤트가 항상 존재합니다. 따라서 프로젝트를 수행 할 때 때때로 AJAX 요청의 결과가 1, 2, 4, 8과 같이 겹쳐지는 이유입니다. Bind가 사용되면 각 트리거링 이벤트가 작업에 바인딩됩니다. 따라서 처음으로 트리거되면 Ajax 요청이 한 번 요청됩니다. 두 번째 시간이 트리거되면 Ajax 요청은 1+1 = 2 배입니다. 세 번째는 1+2+1 = 4 배입니다. 네 번째 시간은 1+2+4+1 = 8 회입니다. 따라서 바인드 바인드 이벤트를 사용하는 경우 먼저 요소의 원래 이벤트를 풀고 이벤트에 바인딩하여 AJAX 요청이 여러 번 발생하지 않도록해야합니다.
DOM 바인딩 사고의 동적 생성 실패에 대한 이유와 솔루션에 대한 위의 기사는 편집기가 공유하는 모든 내용입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원하기를 바랍니다.