0

我有一个这样的 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。

希望我说得足够清楚，谢谢大家。

4

1 回答 1

0

您遇到的问题是，每次单击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. 或者，直接在回调处理程序内将点击事件绑定到该特定链接。

于 2012-04-03T10:05:46.900 回答