jquery - jQuery: 動的に追加された要素 + .on()

Question

クラスbuyの一連の HREF があります。次のようにクリックすると、これらをオーバーライドします。

$('.buy').on('click', function (e) {
     e.preventDefault();
     var me = $(this);
     // other stuff here...

これは期待どおりにうまく機能します。これらのリンクをDOMに動的に追加すると問題が発生します。これらのリンクをクリックしても、キャプチャされません。.on()メソッドを使用したバインディングは、JS がロードされたときに DOM に存在しないアイテムで機能すると考えました。

理由がわからず、理解できないようです。期待どおり、 .onで標準のクリックキャプチャを使用しても機能しません。

score 3 · Accepted Answer

$(document).on('click', '.buy', function(e){
     e.preventDefault();
     var me = $(this);
     // other stuff here...
});

イベントは静的要素に委譲する必要があります。2 番目の引数は、関数を実行するセレクターです。

あなたの方法は、まだ維持されていますが、ページの読み込みにバインドされている静的要素にアタッチしません。

score 1 · Accepted Answer

関数も使用できます.target：

$(document).on('click', '.buy', function(e){
   e.preventDefault();
   var me = $(e.target);
   alert(me.attr('id'));
});

これはテストされていませんが、うまくいくかもしれません：

$('.buy').on('click',function(e){     
   e.preventDefault();
   var me = $(e.target);
   alert(me.attr('id'));
});

2 に答える 2