jQuery를 사용하여 동적으로 추가된 요소에 이벤트 핸들러를 연결하는 방법은 무엇입니까?

jQuery를 사용하여 이벤트를 동적 요소에 바인딩하는 방법

.myclass 클래스를 사용하여 요소에 이벤트 핸들러를 연결하는 기존 jQuery 코드가 있다고 가정합니다. . 그러나 이러한 요소가 AJAX 또는 DHTML을 통해 페이지에 동적으로 추가되는 시나리오에서는 새로 생성된 요소에 연결된 클릭 핸들러가 없습니다.

문제 해결 방법

이 문제를 처리하기 위해 jQuery는 여러 가지 접근 방식을 제공합니다.

1. .on() 메서드(jQuery 1.7 ):

.live() 메서드를 .on()으로 바꾸고 상위 요소를 .myclass와 결합하는 선택기를 인수로 지정합니다.

$('body').on('click', 'a.myclass', function() {
    // do something
});

이렇게 하면 클릭 핸들러가 모든 페이지에 언제 추가되는지에 관계없이 .myclass 클래스가 있는 태그.

2. .delegate() 메서드(jQuery 1.6 - 1.8):

.delegate() 메서드는 .on()과 유사하게 작동하지만 상위 요소를 대괄호 안에 지정해야 합니다.

$('body').delegate('a.myclass', 'click', function() {
    // do something
});

.on() 및 .delegate() 모두 동적으로 추가된 이벤트 처리를 허용합니다. 요소.

위 내용은 jQuery를 사용하여 동적으로 추가된 요소에 이벤트 핸들러를 연결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!