동적 요소 이벤트 바인딩: 동적으로 생성된 요소에 이벤트를 바인딩하는 방법은 무엇입니까?

Question

페이지의 모든 선택 상자를 반복하고 너비를 약간 조정.hover 事件绑定到它们，以在 mouse on/off하는 코드가 있습니다.

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

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

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

Answer 1

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

간단히 말하면:

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

으아아아

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

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

으아아아

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

대리자 이벤트 메서드(두 번째 코드 예제)는 이벤트 핸들러를 하나의 요소tbody，并且该事件只需要向上冒泡一级（从单击的 tbody 到 tbody에만 연결하고 이벤트는 한 수준(클릭한

에서

까지)만 버블링하면 됩니다. 참고: 대리자 이벤트는 < /p>SVG🎜에서 작동하지 않습니다. 🎜

Answer 2

jQuery 1.7부터 jQuery.fn.on을 사용하고 선택기 매개변수를 채워야 합니다.

으아악

지침:

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

---

그때까지는 권장 방법은 live():

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

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

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

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

---

서명으로 대체 가능:

으아악 dosomething 的元素，您可以将事件绑定到已经存在的父级（这是问题的核心，您需要一些东西存在绑定到，不绑定到动态内容），这可以（也是最简单的选项）是 document。但请记住 document 예를 들어, 페이지에서 클래스 이름(동적 콘텐츠에 바인딩되지 않음)을 사용하여 요소를 동적으로 생성하는 경우 이는 document일 수 있으며 가장 간단한 옵션입니다. 하지만 문서는 그렇지 않을 수도 있습니다. 가장 효율적인 선택

.

으아악

이벤트가 바인딩될 때 존재하는 모든 부모가 그렇게 합니다. 예를 들어

으아악

적용 대상 🎜 으아악