jQuery загружает элементы через ajax и при этом удаляет его, получая уведомления и от всех предыдущих удалений - PullRequest
Новая
       10

jQuery загружает элементы через ajax и при этом удаляет его, получая уведомления и от всех предыдущих удалений

0 голосов
/ 03 апреля 2012

У меня есть такой div 

<section class="item_container">

<article class="item">
    <h2>Page Title</h2>
    <p><a class="delete_page" href="http://www.abc.com/delete/1/">delete</a></p>
</article>

<article class="item">
    <h2>Second Page Title</h2>
    <p><a class="delete_page" href="http://www.abc.com/delete/2/">delete</a></p>
</article>

</section>

И я использую этот код для удаления / удаления items из item_container

$('a.delete_page').live('click', function(e){
    e.preventDefault();
    $('footer#ajax_footer').html('')
    $('footer#ajax_footer').show("slide", { direction: "down" }, 500);

    var url = $(this).attr("href");
    var parent_div = $(this).parents("div").parent("article");
    var title = $(this).parents("div").parent("article").find('h2').html();

    $('footer#ajax_footer').html('<h2>Are you sure you want to delete <u>'+ title +'</u> Page</h2><p>'+ url +'</p><p><a href="#" class="delete_this_page">Yes, Please Delete It</a></p>');

    $('a.delete_this_page').live('click', function(e){
        e.preventDefault();
        parent_div.remove();
        $('footer#ajax_footer').html('').slideUp();
        $.sticky('<b>Page Deleted</b><p><u>'+ title +'</u> Page has been successfully deleted.</p>');
    });

});

Все содержимое загружается черезAjax и еще несколько div в каждом article и более 30 статей.

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

Как, После того, как я удаляю элемент, я вижу 1 липкое уведомление, После того, как я удаляю второй элемент, я вижу 2 липких уведомления (1 из этого и 1 из предыдущего) я хочу видеть только 1, и для каждого удаляемого элемента отображаются все предыдущие прикрепленные уведомления + 1.

Надеюсь, я прояснил это достаточно, спасибо, ребята.

1 Ответ

0 голосов
/ 03 апреля 2012

Ваша проблема в том, что каждый раз, когда вы нажимаете на элемент a.delete_page, вы настраиваете новый обработчик события щелчка, используя .live(), поэтому для каждого последующего щелчка вы получаете еще одно событие запускается обработчик.

Весь смысл .live() - хотя, как примечание стороны, это устарело; рассмотрите возможность использования .on() (jQuery 1.7+) или .delegate() (до 1.7) - это то, что он обрабатывает события, инициируемые динамически добавленными элементами. Позвоните по этому номеру: 

$('a.delete_this_page').live('click', function(e){
        e.preventDefault();
        parent_div.remove();
        $('footer#ajax_footer').html('').slideUp();
        $.sticky('<b>Page Deleted</b><p><u>'+ title +'</u> Page has been successfully deleted.</p>');
    });

вне вашей другой функции обратного вызова (в вашем $(document).ready()) и найдите другой способ идентифицировать parent_div. Или привяжите событие click к этой конкретной ссылке непосредственно внутри обработчика обратного вызова.

...