jQuery を使用して動的に追加された要素に Onclick イベントをアタッチするにはどうすればよいですか?

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() メソッドの実装例:

<div>

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

以上がjQuery を使用して動的に追加された要素に Onclick イベントをアタッチするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。