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

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 サイトの他の関連記事を参照してください。