동적으로 추가된 요소 노드가 jquery_jquery에서 이벤트를 트리거할 수 없는 문제를 해결하는 두 가지 방법

예를 들어 메시지 목록을 읽기 위해 Ajax를 만들 때 $(".reply").click(function(){ //을 사용하면 "reply" 클래스가 있는 각 메시지 뒤에 응답 버튼이 있습니다. 뭔가를 하세요... }), 아마도 나중에 Ajax를 통해 로드된 목록에 있는 응답 버튼의 클릭 이벤트가 유효하지 않을 것입니다.

사실가장 간단한 방법은 태그에 onclick=""을 직접 쓰는 것이지만, 이렇게 쓰는 것은 실제로는 조금 낮은 수준입니다. 클래스 이름 클릭 이벤트를 설정합니다.

jquery에 동적으로 추가된 요소 노드가 이벤트를 트리거할 수 없는 문제에 대한 두 가지 해결책이 있습니다.

더 나은 시연 효과를 얻기 위해 페이지 본문 아래에 다음 구조의 코드가 있다고 가정합니다.

<p id="pLabel">新加一条</p>
<ul id="ulLabel">
 <li class="liLabel">aaa1</li>
 <li class="liLabel">aaa2</li>
 <li class="liLabel">aaa3</li>
</ul>
<script type="text/javascript">
$("#pLabel").click(function(){
 $("#ulLabel").append('<li class="liLabel">aaaQ</li>'); //动态像ul的末尾追加一个新元素
});
</script>

방법1: 라이브 이용하기

live() 함수는 하나 이상의 이벤트 핸들러를 선택한 요소에 바인딩하고 이러한 이벤트가 발생할 때 실행할 함수를 지정합니다. live() 함수는 선택기와 일치하는 현재 및 미래 요소에 적용됩니다. 예를 들어 스크립트를 통해 동적으로 생성된 요소입니다.

구현은 다음과 같습니다.

$('.liLabel').live('click', function(){
 alert('OK');
});

방법 2: 사용

부모 또는 본문에 바인딩할 수 있는 on 메서드를 통해 이벤트를 바인딩할 수 있습니다.

$("#ulLabel").on('click','.liLabel',function(){
 alert('OK')
});
或者：
$("body").on('click','.liLabel',function(){
 alert('OK')
});

이제 문제가 해결되었는지 확인해 볼 수 있습니다. 이 기사가 도움이 되기를 바랍니다.