web-dev-qa-db-ja.com

jQuery .live（）と.on（）の違いは何ですか

以前のバージョンの.on()を置き換えるjQuery 1.7の新しいメソッド.live()があります。

それらの違いと、この新しい方法を使用することの利点を知りたいと思います。

jqueryjquery-1.7
84
ajbeaven

docs でライブを使用したくない理由はかなり明確です。また、Felixが述べたように、_.on_はイベントをアタッチするより合理的な方法です。

.live（）メソッドの使用は推奨されなくなりました。jQueryの以降のバージョンでは、欠点のないより優れたメソッドが提供されるためです。特に、.live（）を使用すると、次の問題が発生します。

  • jQueryは.live()メソッドを呼び出す前にセレクターで指定された要素を取得しようとしますが、これは大きなドキュメントでは時間がかかる場合があります。
  • 連鎖方法はサポートされていません。たとえば、$("a").find(".offsite, .external").live( ... );はnot有効であり、期待どおりに機能しません。
  • すべての.live()イベントはdocument要素でアタッチされるため、イベントは処理される前に可能な限り最長で低速なパスを取ります。
  • イベントハンドラで event.stopPropagation() を呼び出しても、ドキュメントの下部にアタッチされたイベントハンドラを停止することはできません。イベントはすでにdocumentに伝播しています。
  • .live()メソッドは、驚くべき方法で他のイベントメソッドと対話します。たとえば、$(document).unbind("click")は、.live()への呼び出しによって接続されたすべてのクリックハンドラーを削除します。
98
aziz punjani

.live()から.on()に移動するときに人がつまずく点の1つは、DOMに動的に追加される要素にイベントをバインドする場合、.on()のパラメーターがわずかに異なることです。

.live()メソッドで使用する構文の例を次に示します。

_$('button').live('click', doSomething);

function doSomething() {
    // do something
}
_

.live()がjQueryバージョン1.7で非推奨になり、バージョン1.9で削除されたので、.on()メソッドを使用する必要があります。 .on()メソッドを使用した同等の例を次に示します。

_$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}
_

ボタン自体ではなく、ドキュメントに対して.on()を呼び出していることに注意してください。 2番目のパラメーターで、イベントをリッスンしている要素のセレクターを指定します。

上記の例では、ドキュメントで.on()を呼び出していますが、セレクターに近い要素を使用するとパフォーマンスが向上します。祖先要素は、.on()を呼び出す前にページに存在する限り機能します。

これについて説明します ここではドキュメントにあります ですが、見落としがちです。

11
ajbeaven

公式ブログ をご覧ください

[。

4
FloydThreepwood
.live()

このメソッドは、現在および将来の現在のセレクタに一致するすべての要素にイベントハンドラをアタッチするために使用されます。

$( "#someid" ).live( "click", function() {
  console.log("live event.");
});

そして

.on()

このメソッドは、1つ以上のイベントのイベントハンドラー関数を以下の選択された要素に添付するために使用されます。

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});
2
Mohammed Abrar Ahmed

onとliveの違いに関する良いチュートリアル

上記のリンクからの引用

.live（）の何が問題なのか

.live（）メソッドの使用は推奨されなくなりました。jQueryの以降のバージョンでは、欠点のないより優れたメソッドが提供されるためです。特に、.live（）を使用すると、次の問題が発生します。

  1. jQueryは、.live（）メソッドを呼び出す前にセレクターで指定された要素を取得しようとしますが、これは大きなドキュメントでは時間がかかる場合があります。
  2. 連鎖方法はサポートされていません。たとえば、$（“ a”）。find（“。offsite、.external”）。live（…）;は無効であり、期待どおりに機能しません。
  3. すべての.live（）イベントはドキュメント要素でアタッチされるため、イベントは処理される前に可能な限り最長で最も遅いパスを取ります。
  4. イベントハンドラーでevent.stopPropagation（）を呼び出しても、ドキュメントの下部にアタッチされたイベントハンドラーを停止することはできません。イベントは既にドキュメントに伝播されています。
  5. .live（）メソッドは、驚くべき方法で他のイベントメソッドと対話します。たとえば、$（document）.unbind（“ click”）は、.live（）への呼び出しによってアタッチされたすべてのクリックハンドラーを削除します。
1
venkat

詳細については、それを確認してください。 。live（） および 。on（）

.live（）メソッドは、コンテンツの動的な生成を扱うときに使用されます... Jquery Sliderの値を変更するときにタブを追加するプログラムで作成したように、すべてのタブに閉じるボタンの機能を追加したい生成されます...私が試したコードは...

var tabs = $('#tabs').tabs();
                                        // live() methos attaches an event handler for all
                                        //elements which matches the curren selector
        $( "#tabs span.ui-icon-close" ).live( "click", function() {


            // fetches the panelId attribute aria-control which is like tab1 or vice versa
            var panelId = $( this  ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });

そしてそれはかなりクールに機能します...

0
Hiren

私はChrome拡張機能 "コメント保存" の著者であり、jQueryを使用し、.live()を使用したものです。拡張機能の動作方法は.live()を使用してすべてのテキストエリアにリスナーをアタッチすることにより、ドキュメントが変更されるたびにリスナーをすべての新しいテキストエリアにアタッチするため、これはうまく機能しました。

.on()に移動しましたが、うまくいきません。ドキュメントが変更されるたびにリスナーをアタッチしないため、.live()の使用に戻りました。これは、.on()のバグです。気をつけてね。

0
PixelPerfect3