jQuery on() イベント ハンドラーが動的に追加された要素で動作しないのはなぜですか?

jQuery の on() イベント ハンドラーの修正を見つける

jQuery では、イベント処理における live() から on() への移行が話題になっています。 on() イベント ハンドラーがトリガーされないという問題が発生しました。これに対処するために、問題を詳しく調べて解決策を特定しましょう。

on() のドキュメントには、コードの実行時にイベント ハンドラーがページ上に存在する要素にのみバインドされることが明確に記載されています。これは、ページに動的に追加される要素にイベント ハンドラーを付加する live() の動作とはまったく対照的です。

live() と同様の機能を実現するには、次のパターンを使用する必要があります:

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});

このアプローチは、イベント ハンドラーを既存の要素だけでなく、将来追加される要素にもバインドします。最適なパフォーマンスを得るには、イベント ハンドラーをターゲット要素のできるだけ近くにバインドすることが不可欠です。

要約すると、live() から on() に移行するときは、イベント ハンドラーを動的に追加された要素をバインドすることが重要です。ドロップダウンリストのものと同じです。これにより、コードが期待どおりに動作し、ユーザー操作に効果的に応答することが保証されます。

以上がjQuery on() イベント ハンドラーが動的に追加された要素で動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。