데이터를 로드하기 위해 ajax를 작성할 때 나중에 추가된 데모 노드 요소에서 이전 클릭 이벤트가 손실되는 것을 발견했습니다. 이 문제를 해결하는 방법은 무엇입니까? 아래 편집기는 동적으로 추가된 jQuery ajax 노드가 클릭 이벤트를 트리거할 수 없는 문제에 대한 솔루션을 제공합니다. 도움이 되기를 바랍니다.
데이터를 로드하기 위해 ajax를 작성할 때 나중에 추가된 데모 노드 요소가 이전 클릭 이벤트를 잃어버린 것을 발견했습니다. 클릭 이벤트가 실패하는 이유는 무엇이며 어떻게 해결해야 할까요?
사실 가장 간단한 방법은 태그에 직접 onclick=""을 쓰는 것인데, 이렇게 쓰는 것은 실제로는 조금 낮은 수준입니다. 클래스 이름 클릭 이벤트입니다.
jQuery ajax가 동적으로 추가한 노드가 이벤트를 트리거할 수 없는 문제에 대한 두 가지 솔루션 더 나은 데모 효과를 얻기 위해 페이지 본문 아래에 다음 구조의 코드가 있다고 가정합니다.
<ul id="demo"> <li class="demo1">a1</li> <li class="demo1">a2</li> <li class="demo1">a3</li> </ul> <script type="text/javascript"> $("#demo").click(function(){ $("#demo").append('<li class="demo1">aaa4</li>'); //动态像ul的末尾追加一个新元素 }); </script>
방법 1: 라이브 사용 :
live() 함수는 하나 이상의 이벤트 핸들러를 선택한 요소에 바인딩하고 이러한 이벤트가 발생할 때 실행할 함수를 지정합니다. live() 함수는 선택기와 일치하는 현재 및 미래 요소에 적용됩니다. 예를 들어 스크립트를 통해 동적으로 생성된 요소입니다.
구현은 다음과 같습니다.
$('.demo1').live('click', function(){ alert('OK'); });
방법 2: 사용:
상위 또는 본문에 바인딩할 수 있는 on 메서드를 통해 이벤트를 바인딩할 수 있습니다.
$("#demo").on('click','.demol',function(){ alert('OK') });
위를 통해. 두 가지 방법 모두 클릭 이벤트를 트리거할 수 없는 노드를 동적으로 추가하는 jQuery ajax의 문제를 해결할 수 있습니다. 이제 방법을 알았으니 빨리 시도해 보세요.
관련 권장 사항:
JQuery는 클릭 이벤트를 시뮬레이션하고 이벤트를 자동으로 트리거합니다.
클릭 이벤트를 동적으로 추가하는 js의 일반적인 오류에 대한 자세한 설명
위 내용은 동적으로 노드를 추가하는 jQuery ajax가 클릭 이벤트를 트리거할 수 없는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!