Невозможно удалить динамически добавленный контент с помощью jQuery

Question

Я использую jQuery, чтобы пользователи динамически добавляли и удаляли поля формы, но они не работают должным образом.

Он отлично работает при удалении первого поля (которое жестко закодировано в HTML-разметке), но оно не позволит мне удалить любое из полей, которые были добавлены динамически.

Вот мой JQuery код:

$("#addDog").click(function(event) 
{ 
    event.preventDefault(); 

    var doglist = <?php echo "'" . $javadogs . "'"; ?>; 
    var newdog = '<div><select name="resDog[]" class="select">' + doglist + '</select><input type="text" class="shortinput" name="resResult[]" size="20" value="" /><a href="#" class="deleteDog"><img src="/admin/images/delete.png" alt="Remove dog" /></a></div>'; 
    $(this).parent().before(newdog); 
}); 

$(".deleteDog").click(function(event) 
{ 
    event.preventDefault(); 
    $(this).parent().remove(); 
}); 

Я попытался с помощью .on() функции JQuery, но это не сработало.

Answer 1

Вот как вы хотите использовать on

$(document).on("click", ".deleteDog", function(e) { 
    e.preventDefault(); 
    $(this).parent().remove(); 
}); 

В идеале все эти deleteDog кнопки будут размещены в какой-то контейнер. Если все эти кнопки должны были быть в DIV с идентификатором foo, вы бы более эффективно настроить такие события:

$("#foo").on("click", ".deleteDog", function(e) { 
    e.preventDefault(); 
    $(this).parent().remove(); 
}); 

Теперь, вместо того, чтобы каждый клик в любом месте документа, проверяемый, только те, клики, которые доходят до #foo.

---

Я предполагаю, что вы первоначально пытались использовать on так:

$(".deleteDog").on("click", function(e) { 
    e.preventDefault(); 
    $(this).parent().remove(); 
}); 

Это функционально идентично говоря:

$(".deleteDog").bind("click", function(e) { 
    e.preventDefault(); 
    $(this).parent().remove(); 
}); 

Опуская параметр выбора, как это создает непосредственно связанные события-только элементы, которые соответствуют селектору .deleteDog в то время on будет подключен.

Применение селектора типа в моем исходном коде, делает его делегирован событий JQuery будет слушать все клики, и если они происходят от элемента с классом deleteDog, функция срабатывает.