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

私の jQuery `on('change')` が動的に追加されたドロップダウンで機能しないのはなぜですか?

Barbara Streisand
リリース: 2024-12-15 13:43:12
オリジナル
378 人が閲覧しました

Why Doesn't My jQuery `on('change')` Work on Dynamically Added Dropdowns?

jQuery の live() から on() への移行: 何が問題でしたか?

jQuery では、 live() メソッドは次のように置き換えられました。イベント処理には on() を使用します。ただし、jQuery 1.7 に移行し、on('change') を使用して動的に追加されたドロップダウンの変更を検出したにもかかわらず、イベント ハンドラーは非アクティブなままでした。

解決策

主な違いは、on() がイベント委任を処理する方法にあります。動的に作成された要素にイベント ハンドラーを付加する live() とは異なり、on() は呼び出し時に存在する要素にのみハンドラーをバインドします。

live() と同じ機能を実現するには、on( ) 構文は次のように変更する必要があります:

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

これにより、イベント ハンドラーがドキュメント本文にバインドされ、追加された要素に対してもハンドラーが確実にアタッチされます。

あるいは、よりターゲットを絞ったイベント処理のために、可能な限り最も近い祖先要素にハンドラーをアタッチすることを検討してください。

jQuery ドキュメントでは、on() が以前のものとは異なる動作をすることを明示的に述べており、そのイベントを強調しています。ハンドラーは既存の要素にのみバインドされます。これは、on('change') を使用した最初の実装が起動しなかった理由を説明しています。

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

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