jquery - jqueryで最近追加されたタグにクリックイベントをバインドする方法

Answer 1

イベント委任を使用する - これは、クリックを何らかのコンテナーにバインドし、そのコンテナーでイベントを処理できるようにすることを意味します。その後、event.target にクエリを実行して、クリックされたのがアンカーであるかどうかを確認し、動作が必要かどうかを確認できます。これは、いくつかの理由で優れています。

1. 要素にバインドされたイベントが少ない (パフォーマンス)
2. コンテナーは一定のままで、バブル クリック イベントを処理するために常に存在するため、コンテンツの追加/削除後にイベントを再バインドする必要はありません。

コードは次のようになります

$('#someContainer').click( function(ev){

    var $el=$(ev.target);
    if ( $el.is('a') ){
       //do your stuff
    }

});

詳細については、この投稿を参照してください

Answer 2

<a> は onclick ハンドラーが削除されているため失われます。HTML を再度追加しても、そのハンドラーは返されません。

コードをあまり再配置しなくても、クリック ハンドラーとして機能する関数を作成できます。

function playerClicked() {    
        // replace the <a> tag from the previous media player installation
        if (previousplayerlocation != null) {
            $("#" + previousplayerlocation + " .storyplayer")
                .html(graboldcode)
                .click(playerClicked);  // Re-add the onclick handler
        }

        // now remember this installation's <a> tag before it's replaced
        graboldcode = $(this).parent().html();
        // remember where I grabbed this <a> tag from
        previousplayerlocation = $(this).parents("div.storylisting").attr("id");

        // replaces the <a> tag with the media player.
        $(this).media({width: 190,height: 30});
        return false;
}

$(".storyplayer a").bind("click", playerClicked);

Answer 3

livequeryプラグインを見てください。このプラグインを使用すると、DOM 対応で利用できない要素に対してもイベント リスナーをバインドできます。

$('a').livequery('click', function(){

    });

プラグインは DOM を監視し、リスナーをバインドします。自分で評価を強制することもできます。

$.livequery.run()

その他の強力な機能:

リスナーを期限切れにすることができます:

$('a').livequery.expire('click')

onmatch リスナーを登録できます。

$('a').livequery(
function(){ onmatchHandler},
function(){ onmismatchHandler }
);