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

85

.on()jQuery 1.7には、.live()以前のバージョンに代わる新しいメソッドがあるようです。

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

jquery  jquery-1.7 
— ajbeaven
ソース

回答:

99

ライブを使用したくない理由は、ドキュメントでかなり明確になっています。また、Felixが述べた.onように、イベントを添付するためのより合理的な方法です。

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

  • jQueryは、.live()メソッドを呼び出す前にセレクターで指定された要素を取得しようとします。これは、大きなドキュメントでは時間がかかる場合があります。
  • 連鎖メソッドはサポートされていません。例えば、$("a").find(".offsite, .external").live( ... ); ある ではない有効と期待どおりに動作しません。
  • すべての.live()イベントはdocument要素にアタッチされるため、イベントは処理される前に可能な限り長く、最も遅いパスをたどります。
  • event.stopPropagation() イベントハンドラーの呼び出しは、ドキュメントの下部に添付されているイベントハンドラーを停止するには効果がありません。イベントはすでにに伝播されてい documentます。
  • この.live()メソッドは、驚くべき方法で他のイベントメソッドと相互作用します。たとえば、 ！の$(document).unbind("click")呼び出しによってアタッチされたすべてのクリックハンドラーを削除します.live()。
— aziz punjani
ソース
8
これがポイントであるかどうか疑問に思っているのは、新しいonメソッドを作成する代わりにliveメソッドを改善しない理由です。ライブでできることはないが、できないことはありませんか？
— ネオビー2012年
1
@ neobie、コードをより意味のあるものにし、統一性を持たせるため
— Om Shankar
@neobie：下位互換性を維持するためだと思います。この回答で指摘された違いは、彼らの行動がわずかに異なることを示しています。live()の動作を持つように変更された場合on()、既存のコードが破損する可能性があります。jQueryの人々は、レガシーコードを「壊す」ことを必ずしも恐れていないことを示していますが、この場合、リグレッションを導入するリスクを冒さないことが理にかなっていると判断したと思います。
— rinogo 2017年
そのように見えます。 live()1.7で非推奨になり、1.9で削除されました。api.jquery.com/live
— rinogo
11

人々から移動するときにつまずくことを一つの違い.live()には、.on()のためのパラメータがあることである.on()DOMに動的に追加された要素にイベントをバインドするときに、わずかに異なっています。

.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()。

これはここのドキュメントで説明されていますが、見逃しがちです。

— ajbeaven
ソース
4

公式ブログを見る

[..]新しい.on（）および.off（）APIは、jQueryでドキュメントにイベントを添付するすべての方法を統合します—そしてそれらは入力するのが短くなります！[...]

— FloydThreepwood
ソース
2 
.live()

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

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

そして 

.on()

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

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});
— Mohammed Abrar Ahmed
ソース
1

オンとライブの違いに関する優れたチュートリアル

上記のリンクからの引用

.live（）の何が問題になっていますか

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

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

詳細については、それをチェックしてください.. .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" );
        });

そしてそれはかなりクールに動作します...

— ひれん
ソース
SOへようこそ。喜んであなたの答えを詳しく説明しようとし、リンクを提供するだけでなく、リンクのみの答えはここでは悪い習慣と見なされます。
— マタ2014年
ありがとう..私は将来の答えのためにこれを心に留めておきます.. :)
— Hiren 2014年
0

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

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

— PixelPerfect3
ソース
10
あなたはそれを間違って使用しているに違いありません-それは.live()メソッドとはわずかに異なる構文を持っています。に相当.on()するの$('p').live('click', function () { alert('clicked'); });は$(document).on('click', 'p', function () { alert('clicked'); });です。の.on()メソッドを使用してdocumentから、リッスンするイベントハンドラーをアタッチする要素を2番目のパラメーターで指定することに注意してください。
— ajbeaven 2013年
1
これについて詳しくは、api.jquery.com / onをご覧ください。直接および委任されたイベントの
— ajbeaven 2013年
1
この記事も読むことをお勧めします：elijahmanor.com/2012/02/…– ajbeaven 2013
— 1
1
$（selector1）.on（event、selector2、function）を実行することもできます。ここで、selector1は親で、selector2はselector1の子です。これにより、ドキュメント全体を検索する必要がなくなるため、検索領域が最小限に抑えられます。
— ラムシャラン2013
1
@ajbeavenあなたはここであなたの最初のコメントを答えに変えるべきです（それは私がここに到着したときに私が探していたものです）。
— atwright147 2013
-1

ブラウザのクローズイベントを特定する必要があります。調査を行った後、jQuery1.8.3を使用して次のことを行っています。

  1. ハイパーリンクがクリックされたときに、次のjQueryを使用してフラグをオンにします

    $（ 'a'）。live（ 'click'、function（）{cleanSession = false;}）;

  2. 入力ボタンタイプの送信がクリックされたときに、次のjQueryを使用してフラグをオンにします

$（ "input [type = submit]"）。live（ 'click'、function（）{alert（ 'input button clicked'）; cleanSession = false;}）;

  1. フォームの送信が発生したときに、次のjQueryを使用してフラグをオンにします

$（ 'form'）。live（ 'submit'、function（）{cleanSession = false;}）;

今重要なこと...私のソリューションは、.onの代わりに.liveを使用した場合にのみ機能します。.onを使用すると、フォームが送信された後にイベントが発生しますが、これは遅すぎます。多くの場合、フォームはjavascript呼び出し（document.form.submit）を使用して送信されます

したがって、.liveと.onの間には重要な違いがあります。.liveを使用すると、イベントはすぐに発生しますが、.onに切り替えると、時間どおりに発生しません。

— NS
ソース
1
これは真実ではありません。.on間違って使用している必要があります。そうでない場合、コード内の他の何かがこれを引き起こしています。おそらく、.onメソッドのコードを貼り付けます。
— ajbeaven 2014年
ええ。本当じゃない。.on（）は.live（）の改良版です。したがって、ここにコードを貼り付けます。明確にするために
— RecklessSergio 2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.