jQuery を使用して動的に追加された HTML 要素に Onclick イベントをバインドする方法

jQuery を使用する場合、多くの場合、HTML 要素を動的に追加する必要があります。ページ。このような場合、これらの要素にイベント ハンドラーをアタッチするとよいでしょう。ただし、ページの読み込み後に追加された要素にイベント ハンドラーをアタッチするのは困難な場合があります。

問題と以前の解決策

従来は、.bind() メソッドを使用して次のことを行うことができました。動的に追加された要素にイベント ハンドラーをアタッチします。ただし、このメソッドは .on() メソッドに代わって非推奨になりました。

.on() による正しい解決策

onclick イベントをjQuery で動的に追加された要素の場合は、次のように .on() メソッドを使用する必要があります:

$(document).on('click', '.my-element', function() {
  // Your event handling code goes here
});

この例では、.on() メソッドを使用してイベント ハンドラーをドキュメントにアタッチし、'click' イベントと '.my-element' セレクターを指定します。これにより、いつページに追加されたかに関係なく、「my-element」クラスの要素がイベント ハンドラーをトリガーするようになります。

使用例

ここにあります。 .on() メソッドの実装例:

この例では、.on() メソッドが使用されます#container div 内のクラス「my-element」を持つ要素にイベント ハンドラーをアタッチします。このような要素をクリックすると、警告メッセージがトリガーされます。