JQuery динамически создает ссылку

Question

У меня есть кусок JQuery, который создает строку в таблице, а в одной из ячеек есть X, который окружен классом. Когда он динамически создается, а затем щелкнет на прослушивателе кликов, он не срабатывает. Вот код.

$('#add').click(function() { 
    $('#table').append('<td class="x">X</td></tr>'); 
}); 
$('.x').click(function() { 
    alert('Fired'); 
}); 

Answer 1

Поскольку <td> элемент еще не существует при регистрации обработчика события, вы должны использовать live() или delegate() для обработчика срабатывать позже:

$(".x").live("click", function() { 
    alert("Fired"); 
}); 

Answer 2

$(".x").live("click", function() 
{ 
    alert("Fired"); 
}); 

Живой добавляет события к чему-либо, добавленному позже в DOM, а также к тому, что в настоящее время существует.

Answer 3

Вместо

$('.x').click(function() { 
    alert('Fired'); 
}); 

Изменения в этой

$('.x').live('click', function() { 
    alert('Fired'); 
}); 

Он связывает функцию щелчка на любой созданный элемент с классом х

Answer 4

Вы должны использовать .live функцию, содержание которой динамически генерируется.

так заменить

$('.x').click(function() { 

с

$('.x').live('click',function() { 

Answer 5

Вы первое создания слушателя для всех .x элементов (из которых предположительно равен нуль), то в дальнейшем при добавлении новых .x элементов.

Есть два решения: один заключается в использовании JQuery live, другой переписать код:

var xClickHandler = function() { 
    alert('Fired'); 
}; 
$('#add').click(function() { 
    $('#table').append(
     $('<td class="x">X</td></tr>').click(xClickHandler); 
    ); 
}); 

Answer 6

Использование live вместо click:

$('.x').live("click", function() { 
    alert('Fired'); 
}); 

Answer 7

HTML, вы добавления к в таблице есть опечатка, вы пропустили тег начала:

$('#add').click(function() { 
    $('#table').append('<tr><td class="x">X</td></tr>'); 
}); 
$('.x').click(function() { 
    alert('Fired'); 
}); 

Answer 8

Думаю, вам нужно использовать живой метод. http://api.jquery.com/live/

$('.x').live('click', function() { 
    // Live handler called. 
});