동적으로 노드를 추가하는 jQuery ajax가 클릭 이벤트를 트리거할 수 없는 문제를 해결하는 방법

데이터를 로드하기 위해 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는 클릭 이벤트를 시뮬레이션합니다.

클릭 이벤트를 동적으로 추가하는 js의 일반적인 오류에 대한 자세한 설명

위 내용은 동적으로 노드를 추가하는 jQuery ajax가 클릭 이벤트를 트리거할 수 없는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!