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

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

1 голос
/ 08 января 2012

Я использую 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();
});

Я пытался использовать функцию jQuery .on(), но это тоже не сработало.

1 Ответ

6 голосов
/ 08 января 2012

Вот как вы хотите использовать 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,функция сработает.

...