ホームページ >ウェブフロントエンド >jsチュートリアル >動的に追加された要素のために jQuery の `live()` を `on()` に正しく移行するにはどうすればよいですか?

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

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-16 05:22:10732ブラウズ

How to Correctly Migrate jQuery's `live()` to `on()` for Dynamically Added Elements?

jQuery での live() から on() への移行: イベント バインディングのデバッグ

jQuery の live() メソッドはバージョン 1.7 で非推奨になり、on( への切り替えが必要になりました) )。 live() を on() に置き換えると、理想的には同様の結果が得られるはずですが、on() のドキュメントでは、イベント ハンドラーはバインド時にページ上に存在する現在選択されている要素にのみバインドされることを強調しています。

オリジナル実装 (live()):

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

置換(on()):

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

live() との不一致は、イベントを添付する live() の委任メカニズムとは異なり、on() が現在存在する要素にのみバインドするという事実に由来します。 DOM に動的に追加される要素へのハンドラー。

動的に対する on() の正しい使用法要素:

on() を使用して動的に追加された要素のイベント処理を維持するには、バインド時にページ上に存在する親要素にイベント ハンドラーをバインドする必要があります。これは、

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

を使用することで実現できます。また、イベント委任を要素階層の近くに適用して、特異性を向上させることもできます。

jQuery ドキュメント ヒント:

live() のドキュメントには、後継者に関して live() を書き直すにはバインディング イベントが含まれることが明示的に記載されています既存の要素へのハンドラー:

$(document).on(events, selector, data, handler);  // jQuery 1.7+

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。