예를 들어 메시지 목록을 읽기 위해 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') });
이제 문제가 해결되었는지 확인해 볼 수 있습니다. 이 기사가 도움이 되기를 바랍니다.