JQuery не запускается на добавленном элементе

Question

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

Вот список:

<ul id="mylist">
    <li>Item 1 <a class="remove">X</a></li>
    <li>Item 2 <a class="remove">X</a></li>
</ul>
<a class="add">Add</a>

Вот jQuery:

$('.add').click(function(){ 
    $('#mylist').append('<li>Item 3 <a class="remove">X</a></li>');
});

$('.remove').click(function(){ 
    $(this).parent().hide('slow').remove();
});

Кто-нибудь пролил свет на это, мне нужно обновить dom или что-то еще, чтобы jQuery распознал добавленные элементы?

Answer 1

Вам необходимо использовать новый живой API, добавленный в jQuery в версии 1.3

.

http://api.jquery.com/live/

Если вы не можете использовать 1.3, есть плагин JQuery для 1.2 под названием LiveQuery , который работает аналогично.

Answer 2

Это нормальное поведение. Когда вы вызываете селектор (например, $ (". Remove")), он выполняется для текущего DOM. При настройке обработчика события «удалить» он будет связан с существующими элементами (в вашем примере 1 и 2), но не с элементами, созданными после этого.

К счастью, недавно в jQuert была добавлена ​​новая функция: live . Это позволит вам настроить события, связанные с элементами DOM, добавленными впоследствии:

$('.remove').live("click", function(){ 
        $(this).parent().hide('slow').remove();
});

Answer 3

Ах, меня это укусило несколько дней назад. Вам нужно будет привязать событие (события) ко всем новым элементам, которые добавляются после выполнения обработчика готовности при загрузке страницы. Интересно, что есть отличный плагин jQuery Live Query , который позаботится обо всем.

Answer 4

Хотя я бы порекомендовал использовать последнюю версию jQuery, вы также можете сделать это без «живых» событий, создав событие где-то в желаемом пространстве имен и привязав событие к элементам до того, как вы их закончите.

var removeClickFunction = function(ev) {
    $(this).parent().hide('slow').end().remove();
    ev.preventDefault();
};
$('.remove').click(removeClickFunction);

$('.add').click(function(ev) {
    $('#mylist').append($('<li>Item 3 </li>').append($('<a class="remove" href="#">new remove</a>').click(removeClickFunction)));
    ev.preventDefault();
});

Answer 5

jQuery 1.3.x поддерживает «живые события»: события могут быть связаны с текущими и будущими элементами, которые соответствуют селектору. Вы можете добиться этого, используя метод .live () .

Answer 6

вы пытаетесь привязать обработчик события к типу элемента, который не существует. Используйте jQuery 1.3+. Он имеет новый $ .live (), который может устанавливать обработчики событий для элементов, которые еще не существуют