проблема .parent ().remove()

ProgramBox

проблема .parent ().remove()

Post author:admin
Запись опубликована:28 апреля, 2023
Post category:Вопросы по программированию

#jquery #forms #clone

#jquery #формы #клонировать

Вопрос:

У меня есть форма на основе jQuery, где вы можете добавлять дополнительных пользователей в приложение. Я клонирую первый набор полей и добавляю его в конец максимум для 3 дополнительных пользователей. Когда вы добавили 1 дополнительного пользователя, у вас есть возможность удалить этого пользователя.

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

Я использую:

 $(".remove").click(function() {
    $(this).parent().remove();

который работал изначально, но теперь это не так, и я не могу понять, почему.

Я убрал строки, которые останавливают первую ‘удалить этого пользователя’, просто чтобы показать, что первая все еще работает, а остальные — нет. (Я удалю первый из них со сцены в конечном итоге, когда это будет исправлено)

Вероятно, это проще увидеть, поэтому я разместил это здесь.

Итак, по сути, есть идеи, почему мое ‘удалить этого человека’ не работает со всем, кроме первого раздела?

Ответ №1:

Попробуйте:

 $(document).on('click', '.remove', function() {
    $(this).parent().remove();
});

События привязаны к загрузке страницы, поэтому недавно добавленный элемент — нет.

1. Скорее всего, это сработает, и если это так, то причина в том, что при этом $.click() вы подключаете обработчик событий ко всем существующим в данный момент элементам, соответствующим селектору, в то время как $.live() подключает его ко всем текущим или будущим соответствующим элементам. Если блоки для новых пользователей добавляются после того, как код слишком сильно подключается к обработчику событий, они не существовали при подключении обработчика и, следовательно, не были включены в селектор, когда что-то произошло .

2. @Tomas: На самом деле .live() не подключается ни к одному из элементов, соответствующих селектору. Он предоставляет обработчик для window или document (я не помню, какой именно) и использует делегирование событий по всему документу. По этой причине я предпочитаю использовать .delegate() , который также использует делегирование, но только в пределах определенного вами контейнера.

3. @patrick: Ты прав. С точки зрения производительности лучше использовать delegate. Хотя делегат также использует live (с дополнительным параметром) внутри.

4. Да, вы правы. Поскольку они делают одно и то же, jQuery объединил всю функциональность в один метод. Я думаю, было бы лучше, если бы они просто назначили один общедоступный метод делегирования.

Ответ №2:

Вызов функции ‘live’ устарел и больше не работает. Инструкции по перезаписи функций с использованием метода замены ‘on()’ можно найти здесь, а также дополнительную информацию об устаревании:

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

Для обработки всех текущих и вновь созданных элементов теперь необходимо использовать:

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

jQuery выполняется для объекта document, а не для элемента, и есть дополнительный параметр, указывающий, какие элементы просматривать и добавлять прослушиватели событий.

Ответ №3:

Убедитесь, что вы закрыли свое выражение:

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

Ответ №4:

Вы можете сделать это для удаления родительского:

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

или вы можете сделать это для удаления всех родителей:

  $(document).on("click", ".remove", function() { 
      $(this).parents().remove();
 });

Ответ №5:

Элементы изначально не существуют, что означает, что вам нужно использовать .live() или .delegate()

Например, изменить:

используйте $(".remove").click(...) вместо $(".remove").live("click", ...) этого