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

追加された HTML 要素の Onclick イベントの動的バインディング

jQuery を使用して Web ページに要素を動的に追加する場合、クリック イベントをバインドする必要があります適切な機能を確保するために適切に。ただし、.bind() や .live() などの古いメソッドは非推奨になりました。代わりに、.on() メソッドを使用する必要があります。

.on() メソッドは 3 つの引数を取ります: イベント タイプ (例: 'click')、イベントが適用される要素を識別するセレクターです。

例:

$(document).on('click', '.added-element', function() {
    alert('Hello from the binded event!');
});

この例では、クラス「added-element」を持つ要素はすべてバインドされます。 DOM に動的に追加されたかどうかに関係なく、クリックされたときにアラートをトリガーします。

注:

.on() メソッドを使用してイベントをバインドすることもできます。特定のコンテナ内に要素を動的に追加します。たとえば、クリック イベントを ID「container」を持つ div 内のすべての要素にバインドする場合は、次のコードを使用します:

$('#container').on('click', '.added-element', function() {
    alert('Hello from the container!');
});

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