私はこのコードを持っています
$(".myclass").on("click", function(e){
alert('Hello');
});
動的に追加された要素では機能しなくなりました
ライクライブ機能の使い方
ライブのように使用するには、「委任」を使用する必要があります。つまり、次のように、最初から存在する親要素にハンドラーをアタッチします。
$(document).on('click', '.myclass', function(e){
alert('Hello');
});
docsで言っていることに注意してください:
イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。または、次に説明するように、委任されたイベントを使用してイベント ハンドラーをアタッチします。
また、パフォーマンスの問題が心配な場合は、ハンドラーをできるだけ「低く」アタッチしてみてください。
ドキュメント ツリーの最上部近くに委任されたイベント ハンドラを多数アタッチすると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQuery は、そのタイプのすべての添付イベントのすべてのセレクターを、イベント ターゲットからドキュメントの先頭までのパス内のすべての要素と比較する必要があります。最高のパフォーマンスを得るには、委任されたイベントをターゲット要素にできるだけ近いドキュメントの場所に添付します。大きなドキュメントの委任イベントに document または document.body を過度に使用しないでください。
on
ページの読み込み時に DOM に存在する要素にアタッチし、次のように委譲し.myclass
ます。
$('#classContainer').on('click', '.myclass', function(e) {
alert('Hello');
});
jQuery version 1.7
コードに以上を含める必要があります。
要素を動的に追加しているため、イベントを委任する必要があります。
$("body").on("click",'.myclass', function(e){
alert('Hello');
});
クリックイベントが関連付けられた後に追加される要素にはイベントがアタッチされません。これが、イベントのバブリングにより子イベントにイベントを追加する親コンテナにイベントを追加する必要がある理由です。