動的に追加された要素を jQuery の .live() から .on() に移行するにはどうすればよいですか?

jQuery で .live() を .on() に更新

jQuery バージョン 1.7 以降では、.live() メソッドはより汎用性の高い .on() メソッドに置き換えられました。ただし、.on() に移行する場合、適切なイベント処理を保証するために、特定のニュアンスを考慮する必要があります。

発生する一般的な問題の 1 つは、動的に追加された要素に関係します。 .live() は、指定されたセレクターに一致する既存の要素と将来の要素の両方にイベント ハンドラーを自動的にアタッチしますが、.on() は、呼び出し時に DOM 内にすでに存在する要素にのみハンドラーをアタッチします。

同様のことを実現するには動的要素を扱う場合は、.on() を使用してイベント ハンドラーを上位レベルの要素 (ドキュメント本文など) にバインドする必要があります。

たとえば、動的なドロップダウンが Web ページに追加され、変更を検出するためにイベント ハンドラーをこれらのドロップダウンにアタッチする必要があるシナリオを考えてみましょう。 .on() を使用すると、イベント ハンドラーは次のようにドキュメント本文にバインドされます。

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

または、イベント ハンドラーをターゲット要素のできるだけ近くにバインドすることをお勧めします。これにより、パフォーマンスが向上し、パフォーマンスが向上します。潜在的な問題。

以上が動的に追加された要素を jQuery の .live() から .on() に移行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。