동적으로 생성된 요소에 대한 이벤트 바인딩?

Question

페이지의 모든 선택 상자를 반복하고 .hover 이벤트를 바인딩하여 ;/코드>.

이는 페이지가 준비되고 제대로 작동할 때 발생합니다.

제가 겪고 있는 문제는 초기 루프 이후에 Ajax나 DOM을 통해 추가된 선택 상자에 이벤트가 바인딩되어 있지 않다는 것입니다.

이 플러그인(jQuery Live Query Plugin)을 찾았지만 플러그인을 사용하여 내 페이지에 또 다른 5k를 추가하기 전에 jQuery를 직접 사용하거나 다른 플러그인을 통해 이를 수행하는 방법을 아는 사람이 있는지 확인하고 싶었습니다. 옵션.

Answer 1

jQuery.fn.on 문서에 좋은 설명이 있습니다 一个>.

간단히 말하면:

따라서 아래 예에서는 코드가 생성되기 전에 #dataTable tbody tr가 존재해야 합니다.

으아악

새 HTML이 페이지에 삽입되면 아래 설명과 같이 위임된 이벤트를 사용하여 이벤트 핸들러를 연결하는 것이 가장 좋습니다.

위임된 이벤트의 장점은 나중에 문서에 추가되는 하위 요소의 이벤트를 처리할 수 있다는 것입니다. 예를 들어, 테이블이 존재하지만 코드를 사용하여 행이 동적으로 추가되는 경우 다음이 이를 처리합니다.

으아악

아직 생성되지 않은 하위 요소에 대한 이벤트를 처리할 수 있다는 것 외에도 위임된 이벤트의 또 다른 장점은 많은 요소를 모니터링해야 할 때 오버헤드를 줄일 수 있다는 것입니다. tbody 에 1,000개의 행이 있는 데이터 테이블에서 첫 번째 코드 예제는 1,000개의 요소에 핸들러를 연결합니다.

대리자 이벤트 메서드(두 번째 코드 예)는 이벤트 핸들러를 하나의 요소인 tbody，并且事件只需要向上冒泡一层（从单击的 tr 到 tbody에만 연결하고 이벤트는 한 수준 위로만 버블링하면 됩니다(클릭한 tr에서

까지).

참고: 대리자 이벤트는 SVG에서 작동하지 않습니다. 🎜

Answer 2

jQuery 1.7부터 선택기 매개변수가 채워진 jQuery.fn.on을 사용해야 합니다.

으아아아

지침:

이를 이벤트 위임이라고 하며, 이렇게 작동합니다. 이 이벤트는 처리되어야 하는 요소의 정적 상위(staticAncestors)。每次在此元素或后代元素之一上触发事件时，都会触发此 jQuery 处理程序。然后，处理程序检查触发事件的元素是否与您的选择器 (dynamicChild) 일치에 연결됩니다. 일치하는 항목이 있으면 사용자 정의 핸들러 함수가 실행됩니다.

---

이전에 권장되는 방법은 live():

을 사용하는 것입니다. 으아아아

그러나 live() 在 1.7 中已被弃用，取而代之的是 on()，并在 1.9 中完全删除。 live()live()는 1.7에서 더 이상 사용되지 않고

on()으로 대체되었으며 1.9에서는 완전히 제거되었습니다.

live() 서명: 으아아아 on()...다음

on()

---

서명:

으로 대체 가능 으아아아 dosomething 的元素，您可以将该事件绑定到已经存在的父级（这是该事件的核心）这里的问题是，你需要一些存在的东西来绑定，而不是绑定到动态内容），这可以是（也是最简单的选项）是document。但请记住 document 예를 들어 페이지에서 클래스 이름이

dosomething인 요소를 동적으로 생성하는 경우 해당 이벤트를

이미 존재하는 상위 이벤트

(이벤트의 핵심)에 바인딩할 수 있습니다. 여기서 문제는 기존의 항목이 필요하다는 것입니다. 동적 콘텐츠에 바인딩하는 대신에 바인딩하는 가장 간단한 옵션은

document입니다. 하지만

document가 가장 적합하지 않을 수도 있다는 점을 명심하세요. 효율적인 옵션 🎜. 🎜 으아아아 🎜이벤트가 바인딩될 때 존재하는 모든 부모가 그렇게 합니다. 예를 들어 🎜 으아아아 🎜적용 대상 🎜 으아아아