jQuery click() 이벤트가 로드된 AJAX에서 실행되지 않음HTML 요소

jQuery click() 이벤트가 로드된 AJAX에서 실행되지 않음HTML 요소

그 주제는 제 문제를 꽤 잘 묘사하고 있어요.이렇게는 안 될 것 같은데, 이 문제를 해결할 방법이 있을까요?(회피책)

다음은 AJAX를 통해 로드되는 코드입니다.

<div>
<div id="s0frame" class="sframe"></div>
<div id="s1frame" class="sframe"></div>
<div id="s2frame" class="sframe"></div>
<div id="s3frame" class="sframe"></div>
<div id="s4frame" class="sframe"></div>
<div id="s5frame" class="sframe"></div>
<div id="chatframe" class="chat alpha60"></div>
</div>

다음은 클릭 이벤트입니다.

$('.sframe').bind('click', function() { 
    var seat_number = this.id.match(/\d/g);
    alert(seat_number); 
});

이렇게 해.

 $(document).on("click",".sframe",function(e){
 var seat_number = this.id.match(/\d/g);
 alert(seat_number); 
 });

또는

 $(document).delegate(".sframe","click",function(e){
 var seat_number = this.id.match(/\d/g);
 alert(seat_number); 

 });

편집:

jQuery 1.7에서는 .live() 메서드는 권장되지 않습니다.이벤트 핸들러를 부가하려면 .on()을 사용합니다.이전 버전의 jQuery 사용자는 .delegate()를 사용해야 합니다.

이벤트 핸들러를 DOM에 동적으로 추가된 요소에 다시 연결해야 합니다. .live방법은 널리 사용되었지만 지금은 사용되지 않습니다.jQuery 버전 1.7 이상에서는 또는 다른 방법으로

$(document).on("click",".sframe",function(e){

});

위임 사용

$(document).delegate(".sframe","click",function(e){

});

.bind() 함수는 마크업이 페이지에 로드된 후에 호출하지 않는 한 .live()와 같은 다른 함수를 사용해야 합니다.또한 jQuery의 최신 버전을 사용하는 경우에는 .bind()가 실행 시 이미 존재하는 DOM 요소만 대상으로 하기 때문에 바람직합니다.on()에서는 페이지에 추가된 요소를 추적하기 위한 다양한 스코프 옵션을 제공합니다.

$(document).on('click','sframe', function() { 
    var seat_number = this.id.match(/\d/g);
    alert(seat_number); 
});

언급URL : https://stackoverflow.com/questions/9272438/jquery-click-event-not-firing-on-ajax-loaded-html-elements