jQuery で動的に挿入された HTML 要素に Onclick イベントをバインドする方法

jQuery: 動的に挿入された HTML 要素に Onclick イベントをバインドする

jQuery では、追加された要素にイベント ハンドラーをバインドすることができます。ページがロードされた後の DOM。ただし、.bind() や .live() など、以前に使用されていた一部のメソッドは非推奨になりました。この記事では、更新された .on() メソッドを使用して動的に追加された要素に onclick イベントを適切にバインドする方法について説明します。

提供されたコードは、jQuery の .append() メソッドを使用してリンク要素を動的に追加する方法を示しています。この要素には、.bind() メソッドを使用してバインドされた onclick イベント リスナーが含まれています。ただし、リンクをクリックしてもイベント リスナーはトリガーされません。

この問題を解決するには、.bind() の代わりに .on() メソッドを使用します。 .on() は、イベント委任に使用される新しいメソッドで、イベント処理時に DOM に存在しない要素にイベント ハンドラーをバインドできるようにします。

動的に追加された要素への onclick イベントは次のとおりです:

$(document).on('click', 'selector-to-your-element', function() {
    // Code here ...
});

このコード スニペットでは、selector-to-your-element は動的に追加された要素を識別するセレクターを表します。イベントをバインドしたい場所。このセレクターに一致する要素がクリックされると、イベント ハンドラー内のコードが実行されます。

この方法で .on() を使用すると、onclick イベントが DOM に追加された要素に適切にバインドされるようにすることができます。動的に。

以上がjQuery で動的に挿入された HTML 要素に Onclick イベントをバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。