JQuery удалить функцию не работает

Question

JQuery удалить функцию не работает

0

У меня есть Div с удалением ссылки, когда я нажимаю на удаление этого Div.

    <div class="bar">
        <p style="float:left"> Hello world</p>
         <a href="#" style="float:right" class="delete"> remove </a>
    </div>

Здесь div с классом.bar удаляется, когда я нажимаю на ссылку remove, которая работает нормально.

Но я также создал ссылку ниже div (.bar), которая:

<a href="#" class="add">+ Add New</a>

При нажатии +Add New создаст новый .bar div.

$('.add').click(function() {
 $(".holder").prepend('<div class="bar"><p style="float:left"> Hello world</p> <a href="#" style="float:right" class="delete"> remove </a></div>');
});

Но проблема в том, что этот новый.bar div создается щелчком по удалению, который не работает. Этот новый.bar div не удаляется.

почему это? есть ли другой способ сделать это? Любая помощь будет высоко ценится.

Raihan 14 март 2014, в 11:56

Источник

Теги:

javascript

jquery

html

5 ответов

1

Вы должны использовать делегирование событий:

$('.holder').on('click', '.delete', function() {
    $(this).parent('.bar').remove();
});

Здесь .holder - ближайший статический родительский элемент.

ДЕМО: http://jsfiddle.net/jnLfh/5/

VisioN 14 март 2014, в 08:29

0

Селектор не распознает новый div, добавленный скриптом. Для этого вам нужно добавить делегирование событий. Вот пример

используя "on"

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

используя "живой" (может быть обесценен сейчас. Пожалуйста, проверьте)
```
$('.delete').live('click', function(){
    $(this).parent('.bar').remove();
});
```

Rohit Subedi 14 март 2014, в 09:27

0

$(this) в этом случае относится к $('.delete') , поэтому удалит только это. Кроме того, он не использует делегирование событий, как описано в других ответах, поэтому он не найдет добавленные позже элементы.
matthijs 14 март 2014, в 11:12
0

извини не заметил этого. отредактировал ответ. Спасибо кстати :)
Rohit Subedi 14 март 2014, в 11:19

0

Перейдите к следующему:

$(document).on('click', '.delete', function(e) {
    e.preventDefault(); // stops the jump

также примечание, если вы хотите делегировать событие, тогда вы должны всегда пытаться делегировать ближайший статический родительский элемент (который был доступен во время подготовки документа), поэтому здесь в вашем случае находится <div class='holder'> вы можете изменить на это:

    $('.holder').on('click', '.delete', function(e) {
        e.preventDefault(); // stops the jump

но здесь еще одна вещь для примечания, если вы делегируете ближайший статический родитель, тогда вы должны поместить это событие click в свой "блок подготовки документа".

Jai 14 март 2014, в 09:12

0

Вам необходимо передать событие для динамически добавленных элементов, которых нет в DOM во время выполнения кода привязки события. Вы можете делегировать событие статическому родительскому элементу динамического элемента, в данном примере вы можете делегировать его .holder или документу

Демо-версия

$(".holder").on('click', '.delete', function() {
 $(this).parent('.bar').remove();
});

Делегированные события

Преимуществом делегированных событий является то, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позже. Выбирая элемент, который, как гарантируется, присутствует во время присоединения делегированного обработчика событий, вы можете использовать делегированные события, чтобы избежать необходимости часто присоединять и удалять обработчики событий, jQuery Doc

Adil 14 март 2014, в 08:14

Ещё вопросы

$(this) в этом случае относится к $('.delete') , поэтому удалит только это. Кроме того, он не использует делегирование событий, как описано в других ответах, поэтому он не найдет добавленные позже элементы.
извини не заметил этого. отредактировал ответ. Спасибо кстати :)

Satpal · Accepted Answer · 2014-03-14T08-52-00.000Z

Вам нужно использовать Event Delegation. Вы должны использовать .on(), используя метод делегированных событий.

т.е.

$(document).on('event','selector',callback_function)

пример

$('.holder').on('click', '.delete', function() {
    $(this).parent('.bar').remove();
});

Вместо document вы должны использовать ближайший статический контейнер.

DEMO

У делегированных событий есть то преимущество, что они могут обрабатывать события из элементов-потомков, которые будут добавлены в документ позже. Выбрав элемент, который, как гарантируется, будет присутствовать во время присоединения делегированного обработчика событий, мы можем использовать делегированные события для привязки события click к динамически созданным элементам, а также во избежание необходимости частое прикрепление и удаление обработчиков событий.

Для лучшей производительности вы должны использовать ближайший статический родительский элемент вместо document .
@VisioN, спасибо за внесенные изменения
Спасибо за подробности! Я недавно начал изучать jQuery и не знал об этом :)