Функции jQuery не отвечают после добавления ()

Question

Я создаю серию блоков div, которые позволяют пользователям добавлять / удалять элементы из каждого блока с помощью jQuery. Я обнаружил, что после добавления нового элемента в блок функция щелчка, которую я связал с этим элементом, не будет отвечать. Вот как выглядит мой код:

$(".add").click(function() {
$("#targetbox").append("<span class='remove'>This element was added</span>");
});

$(".remove").click(function() {
alert("removing");
$(this).remove();
});

Если я предварительно заполню #targetbox элементами, они отвечают на функцию щелчка. Только те элементы, которые добавляются динамически, не отвечают функции.

Answer 1

Добавьте метод click непосредственно к новому добавленному элементу

$(".add").click(function() {
    $("#targetbox").append("<span class='remove'>This element was added</span>")
    .bind("click",function(e) {
        alert("removing");
        $(this).remove();
    });
});

Или используйте метод .live(), который будет связывать вас с событием click после добавления любых новых .remove элементов

$(".add").click(function() {
    $("#targetbox").append("<span class='remove'>This element was added</span>");
});

$(".remove").live("click", function() {
    alert("removing");
    $(this).remove();
});

Answer 2

Ваш код обрабатывает событие click для всех элементов в настоящее время в $('.remove').
Любые элементы, которые еще не существуют, не затрагиваются.

Вам необходимо вызвать *Методы 1007 * или .delegate, которые будут обрабатывать событие для всех элементов, соответствующих селектору, независимо от того, когда они были созданы.

Например:

$(".remove").live('click', function() {
    alert("removing");
    $(this).remove();
});

Answer 3

Это потому, что когда ваш код выполняется, элементы еще не добавлены. Вам необходимо добавить функцию удаления клика, которая будет динамически назначаться вашему новому блоку после добавления его во время функции добавления клика.

$(".add").click(function() {
  $("#targetbox").append("<span class='remove'>This element was added</span>");
  // Add code here for .remove click function
});