Событие jQuery click() не запускается на загруженных HTML-элементах AJAX

тема довольно описательна в моей проблеме, я предполагаю, что это не сработает таким образом, есть ли способ заставить ее работать? (Обходной путь)?

Вот код, который загружается через 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>

Вот мое событие click:

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

Ответ 1

Сделайте это.

 $(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); 

 });

Edit:

Как и в jQuery 1.7, метод .live() устарел. Используйте .on() для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать .delegate().

Ответ 2

вам нужно повторно присоединить обработчики событий к динамически добавленным элементам в DOM. Метод .live широко использовался, но теперь он устарел. В версии jQuery 1.7+ вы можете использовать .on, или же вы можете использовать .delegate

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

});

с помощью делегата

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

});

Ответ 3

Если вы не вызываете эту функцию .bind() после того, как эта разметка загружена на страницу, вам нужно использовать другую функцию, например .live(), или желательно, если вы используете последнюю версию jQuery,.on(), потому что .bind() предназначается только для элементов DOM, которые уже присутствуют при запуске, тогда как .live() и .on() предоставляют вам различные возможности области для отслеживания элементов, добавленных на страницу.

Ответ 4

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