web-dev-qa-db-ja.com

jQueryでlive（）をon（）に変える

私のアプリケーションはドロップダウンを動的に追加しました。ユーザーは必要な数だけ追加できます。

これらのドロップダウンの1つがlive()edになったことを検出するために、私は伝統的にjQueryのchange()メソッドを使用していました。

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

JQuery 1.7の時点で、これを次のように更新しました。

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

ドキュメントを見ると、それは完全に有効であるはずです（そうですか？）が、イベントハンドラーは起動しません。もちろん、jQuery 1.7がロードされ実行されていることを確認しました。エラーログにはエラーはありません。

私は何を間違えていますか？ありがとう！

javascriptjqueryjquery-1.7
197
Jack

on documentation 状態（太字;））：

イベントハンドラは、現在選択されている要素にのみバインドされます。コードが.on()を呼び出すときにページに存在する必要があります。

.live()と同等なものは次のようになります

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

イベントハンドラーを要素にできるだけ近く、つまり、階層内でより近くにある要素にバインドする方が適切です。

更新：別の質問に答えているときに、これが .live documentation にも記載されていることがわかりました。

.live()メソッドを後継者に関して書き換えるのは簡単です。これらは、3つのイベント添付メソッドすべての同等の呼び出しのテンプレートです。

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+
242
Felix Kling

選択した回答に加えて、

アプリケーションの移行を待っている間に、jQuery.liveをjQuery 1.9+に移植します。これをJavaScriptファイルに追加します。

// Borrowed from jQuery 1.8.3's source code
jQuery.fn.extend({
  live: function( types, data, fn ) {
          if( window.console && console.warn ) {
           console.warn( "jQuery.live is deprecated. Use jQuery.on instead." );
          }

          jQuery( this.context ).on( types, this.selector, data, fn );
          return this;
        }
});

注：this.selectorが削除されるため、上記の関数はjQuery v3から機能しません。

または、 https://github.com/jquery/jquery-migrate を使用できます

25
Vikrant Chaudhary

サードパーティのコードを編集する必要のない、より良いソリューションを見つけました。

https://github.com/jquery/jquery-migrate/#readme

Visual StudioにjQuery Migrate NuGetパッケージをインストールして、すべてのバージョン管理の問題をなくします。次回Microsoftが目立たないAJAXおよび検証モジュールを更新すると、おそらく移行スクリプトなしで再試行して問題を解決したかどうかを確認します。

JQuery MigrateはjQuery Foundationによって管理されているため、これはサードパーティライブラリにとって最適なアプローチであるだけでなく、ライブラリの更新方法の詳細を示す警告メッセージを取得することでもあると思います。

7
Tony Wall

選択した回答に加えて、

Visual Studioを使用する場合、Regex Replaceを使用できます。
編集>検索と置換>ファイルで置換
またはCtrl + Shift + H

[検索と置換]ポップアップで、これらのフィールドを設定します

検索対象：\$\((.*)\)\.live\((.*),
次と置換：$(document.body).on($2,$1,
検索オプションで「正規表現を使用する」にチェックを付けます

3
Maykol Rypka