Sự kiện jQuery click() không kích hoạt trên các phần tử HTML được nạp AJAX

Question

chủ đề khá mô tả vấn đề của tôi, tôi cho rằng nó sẽ không hoạt động theo cách này, có cách nào để làm cho nó hoạt động không? (workaround)?

Đây là mã được nạp thông qua 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> 

Đây là sự kiện click của tôi:

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

Answer 1

Thực hiện việc này.

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

hoặc

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

}); 

Edit:

Tính đến jQuery 1.7, phương pháp .live() bị phản đối. Sử dụng .on() để đính kèm trình xử lý sự kiện. Người dùng các phiên bản cũ hơn của jQuery nên sử dụng .delegate().

Answer 2

Trừ khi bạn đang gọi là chức năng .bind() sau khi đánh dấu được nạp vào trang, bạn cần sử dụng một hàm khác như .live() hoặc tốt hơn là nếu sử dụng phiên bản mới nhất của jQuery, .on() vì .bind() chỉ nhắm vào các phần tử DOM đã có khi chạy trong khi .live() và .on () cung cấp cho bạn các tùy chọn phạm vi khác nhau để theo dõi các yếu tố được thêm vào trang.

Answer 3

bạn phải đính kèm lại trình xử lý sự kiện vào các phần tử được thêm động vào DOM. Phương pháp .live đã được sử dụng rộng rãi nhưng hiện nay không còn được sử dụng nữa. Trong phiên bản jQuery 1.7+ bạn có thể sử dụng .on hoặc cách khác bạn có thể sử dụng .delegate

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

}); 

sử dụng đại biểu

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

}); 

Answer 4

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