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 以上の記事があります。

問題は、すべてのアイテムが削除された後に通知を表示するためにスティッキー プラグインを使用していて、正常に動作していることです。すべて正常に動作していますが、記事を削除した後、以前の削除のスティッキー通知も表示されます。

のように、アイテムを削除した後、1 つのスティッキー通知が表示されます。2 番目のアイテムを削除した後、2 つのスティッキー通知が表示されます (1 つがこれと前の 1 つ)、1 つだけを表示したい、そしてすべてのアイテムを削除すると、以前のスティッキー通知 + 1。

私はそれを十分に明確にしたことを願っています、ありがとう。

4

1 に答える 1

0

問題は、要素をクリックするたびにを使用して新しいクリック イベント ハンドラーをa.delete_page設定しているため、その後のクリックごとに、実行されるイベント ハンドラーがもう 1 つ取得されることです。.live()

全体的なポイント.live()- ただし、補足として、非推奨です。.on()（jQuery 1.7+）または（1.7より前）の使用を検討してください.delegate()-動的に追加された要素によってトリガーされるイベントを処理することです。これを呼び出します：

$('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 に答える