Question

I have a div like this

<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>

And i am using this code to remove/delete items from 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>');
    });

});

All the contents are loaded via Ajax and there are few more div in each article and there are 30+ articles.

The problem is i am using Sticky plugin to display notification after every item is deleted and it’s working fine, Everything is working fine, But after i delete an Article, The sticky notification of previous deletion is displayed as well.

Like, After i delete an item, i see 1 sticky notification, After i delete second item i see 2 sticky notifications (1 of this and 1 of previous) i only want to see 1, And For every item i delete it display all the previous sticky notifications + 1.

Hope i made it clear enough, Thanks guys.

Answer 1

The problem you have is that every time you click on a a.delete_page element you’re setting up a new click event handler using .live(), so for each subsequent click you get one more event handler that gets run.

The whole point of .live() – though, as a side note, it’s deprecated; consider using .on() (jQuery 1.7+) or .delegate() (prior to 1.7) – is that it handles events triggered by dynamically added elements. Call this:

$('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>');
    });

outside of your other callback function (in your $(document).ready()), and find another way to identify parent_div. Or, bind the click event to that specific link directly inside the callback handler.