JQuery удалить родительский OnClick не работает для новых элементов

Question

JQuery удалить родительский OnClick не работает для новых элементов

0

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

JSFiddle: http://jsfiddle.net/Kxr4C/

HTML:

<div class="options">
  <div><input type="text" name="option[]" value="Option A"> <a href="#" class="delete_option">Delete</a></div>
  <div><input type="text" name="option[]" value="Option B"> <a href="#" class="delete_option">Delete</a></div>
  <div><input type="text" name="option[]" value="Option C"> <a href="#" class="delete_option">Delete</a></div>
</div>
<a href="#" class="new_option">Add a new option</a>

Javascript:

jQuery('a.new_option').click(function(){
  jQuery('div.options').append('<div><input type="text" name="option[]" value=""> <a href="#" class="delete_option">Delete</a></div>');
});

jQuery('a.delete_option').click(function(){
  jQuery(this).parent('div').fadeOut();
});

dirk 20 янв. 2014, в 17:45

Источник

0

возможный дубликат привязки событий к динамически создаваемым элементам?
t.niese 20 янв. 2014, в 16:07

Теги:

javascript

jquery

html

3 ответа

0

вы должны использовать метод.on вместо этого, чтобы он делегировал событие новым элементам.

jQuery(document).on('click','a.delete_option',function(){
jQuery(this).parent('div').fadeOut();
});

здесь новая скрипка http://jsfiddle.net/rjC6C/

Marcelo Biffara 20 янв. 2014, в 15:02

1

Хотя это правильный синтаксис для делегата, .on сам по себе не означает делегат . [...]As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.[...] возможности, .on [...]As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.[...] так .on это предпочтительный способ добавления прямых и делегировать слушатель, только добавляя селектор как Второй аргумент делает это делегату .
t.niese 20 янв. 2014, в 16:15

0

Использовать .on()

jQuery.on('click', 'a.delete_option', function () {
    jQuery(this).parent('div').fadeOut();
});

Мероприятие

Tushar Gupta 20 янв. 2014, в 14:19

Ещё вопросы

возможный дубликат привязки событий к динамически создаваемым элементам?
Хотя это правильный синтаксис для делегата, .on сам по себе не означает делегат . [...]As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.[...] возможности, .on [...]As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.[...] так .on это предпочтительный способ добавления прямых и делегировать слушатель, только добавляя селектор как Второй аргумент делает это делегату .

Felix · Accepted Answer · 2014-01-20T13-37-00.000Z

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

jQuery('div.options').on('click', 'a.delete_option', function(){
  jQuery(this).parent('div').fadeOut();
})

Спасибо за предложение, это работает! Я приму ваш ответ, как только это будет разрешено.