ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery の移行: 動的に追加されたドロップダウンで「on()」が機能しないのはなぜですか?

jQuery の移行: 動的に追加されたドロップダウンで「on()」が機能しないのはなぜですか?

Barbara Streisand
リリース: 2024-12-08 16:40:11
オリジナル
827 人が閲覧しました

jQuery Migration: Why Doesn't `on()` Work With Dynamically Added Dropdowns?

jQuery: 動的に追加されたドロップダウンの live() から on() へのアップグレード

jQuery 1.7 では、代わりに on() メソッドが導入されました。 live()の場合。 on() の構文と目的の機能は単純に見えますが、動的に追加された要素について live() から on() に移行しようとすると問題が発生する可能性があります。

問題:

on() を使用して動的に追加されたドロップダウン メニューの change() イベントをリッスンすると、イベント ハンドラーは失敗します。 fire.

原因:

ドキュメント内の一致するすべての要素にイベント ハンドラーをアタッチする live() とは異なり、on() はハンドラーを既存の要素にバインドするだけです。これは、on() イベント ハンドラーが現在選択されている要素に限定されているためです。つまり、ハンドラーが上位レベルの要素にバインドされていない限り、新しく追加された要素はイベントをトリガーできません。

解決策:

live() の動作を複製するには、動的に追加されたイベントをカプセル化する上位レベルの要素にイベント ハンドラーをバインドします。ドロップダウン。これにより、そのスコープ内で新しく追加されたすべての要素がイベント ハンドラーをトリガーできるようになります。

コード:

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});
ログイン後にコピー

または、バインドすることをお勧めします。イベント ハンドラーをターゲット要素にできるだけ近づけます。ただし、これはすべてのシナリオで常に実現可能であるとは限りません。

注:

on() ドキュメントでは、イベント ハンドラーは現在選択されている要素にバインドされており、バインド時にページ上に存在する必要があります。

以上がjQuery の移行: 動的に追加されたドロップダウンで「on()」が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート