なぜ私はいくつかのコードの誰かを見ていた... jQueryを使って現在

Question

）（代わりにクリックの（）に

$(".close-box").click(function() { 
    MoneyBox.closeBox(); 
    return false; 
}); 

をjQueryのを使用します限り、彼らは今、非推奨とjQueryでライブ（）関数を使用している以外、私が言うことができるように同じことをしているようだ、他のプロジェクトであり、彼らはこのようにそれを行う...

$(".close-box").live("click", function() { 
    MoneyBox.closeBox(); 
    return false; 
}); 

お知らせdocsは代わりにon()を使用すると言いますが、私の最初の例ではなくlive/on（）を使用する理由は何ですか？

Answer 1

あなたは（動的に生成された要素が存在することがあるのでAJAX呼び出しから来例）のために、あなたは以前に同じ要素セレクター、あなたはその後、「デリゲート」セレクタ引数でon()を使用して、クリックイベントにバインドされたのと同じクリックハンドラを持っている場合があります

は証明するために：

http://jsfiddle.net/AJRw3/

on()あなたが指定したセレクタを持っていない場合もclick()と同義になります

$('.elementClass').click(function() { // code 
}); 

で

$('.elementClass').on('click', function() { // code 
}); 

と同義です。クラスを持つすべての要素にハンドラを1回だけ追加する。あなたがから来る新しいelementClassを持っている場合は、たとえば$('<div class="elementClass" />')ため、ハンドラがその新しい要素に拘束されることはありません、あなたは何をする必要があります。

$('#container').on('click', '.elementClass', function() { // code 
}); 

#containerが.elementClassの祖先

Answer 2

あなたはthe difference between live and bind上に読んでください。一言で言えば

、liveは、あなたが今、将来的に存在する要素に結合させ、イベントの委任を使用しています。対照的に

、（click等およびそのショートカット）bind介して結合ハンドラは直接セレクタと一致するDOM要素にハンドラを取り付け、したがって今だけ存在する要素に結合されています。あなたはそれが提供する機能を必要とするとき

liveの柔軟性が低下し、性能の結果なので、それだけを使用しています。

Answer 3

• $("a").live() - >それは、これが呼び出された後、それが作成されている場合でも、すべての<a>に適用されます。
• $("a").click() - >これが呼び出される前に、それが唯一のすべての<a>に適用されます。 （ショートカットはbind()、on()は1.7）
• $("a").on() - >イベントハンドラの接続に必要なすべての機能を提供します。 （jQueryの1.7の最新）

Quotes：jQueryの1.7のよう

、.live（）メソッドは推奨されています。 .on（）を使用してイベントハンドラをアタッチします。 jQueryの古いバージョンのユーザーは、.live（）よりも.delegate（）を優先して使用する必要があります。
このメソッドは、委譲されたイベントハンドラをページのドキュメント要素に結び付け、コンテンツがページに動的に追加されたときにイベントハンドラの使用を簡略化する手段を提供します。詳細については、.on（）メソッドの直接イベントと委任イベントの説明を参照してください。

.on（）メソッドは、jQueryオブジェクト内の要素の現在選択されたセットにイベントハンドラを取り付けます。 jQuery 1.7以降、.on（）メソッドはイベントハンドラをアタッチするために必要なすべての機能を提供します。以前のバージョンの

、.bind（）メソッドは、要素に直接イベントハンドラを取り付けるために使用されます。

Answer 4

$ .click（）は、単に上のバインドまたはいずれかのショートカットです。jQueryのドキュメントから：最初の2つのバリエーションで

、この方法は、.bindのショートカットです（「クリック」、ハンドラ）ならびに.onため（「クリック」、ハンドラ）のjQuery 1.7のように。 3番目のバリエーションでは、引数なしで.click（）が呼び出されると、.trigger（ "click"）のショートカットになります。

Answer 5

あなたはdynamically added elementsに、いくつかのイベントハンドラをバインドする必要がある場合、あなたがliveを使用（非推奨）またはonそれの作業を行う必要があります。 $('element').click(...);はDOMに動的に追加された要素に対しては機能しません。

詳細はThe Difference Between jQuery’s .bind(), .live(), and .delegate()です。

Answer 6

$el.click(fn)は$el.on('click', fn)

のショートカットです詳細はhttp://api.jquery.com/click/とhttp://api.jquery.com/on/を参照してください。

Answer 7

click()は、委任以外の方法on()へのショートカットです。したがって：

$(".close-box").click() === $(".close-box").on('click') 

on()でイベントを委任するには、しないだけでdocumentlive()ように、on()は任意の静的な要素に代表団を紹介し、

$(document).on('click', '.close-box') // Same as $('.close-box').live() 

を：しかし、動的に作成されたオブジェクトにあなたが行うことができます

$("#closestStaticElement").on('click', '.close-box') 

Answer 8

.on()であると仮定すると、メソッドは、jQueryオブジェクト内の現在選択されている要素のセットにイベントハンドラを添付します。 click()方法は、JavaScriptのイベントを「クリック」、または要素にそのイベントをトリガーするイベントハンドラをバインドします。

プレーンで.click(...セレクタのターゲットがオンザフライで変更されている場合（たとえば、いくつかのajaxレスポンスを介して）、ビヘイビアを再度割り当てる必要があります。

.on(...は非常に新しく（jQuery 1.7）、代理イベントを使用してライブシナリオをカバーすることができます。これは、とにかく動作をアタッチするためのより速い方法です。

Answer 9

多くの回答があり、それぞれがいくつかの点に触れています。うまくいけば、これはあなたに何が何か、どのように使用されているかの良い説明とともにあなたの答えを与えることができます。

click()を使用すると、bind('click' ...)の別名です。 bind()を使用すると、イベントリスナーが設定されているときにそのままDOMが使用され、DOM内の一致する各要素に関数がバインドされます。つまり、$('a').click(...)を使用すると、そのコードが実行されたときに見つかったDOM内のすべてのアンカータグのclickイベントに、指定された関数をバインドします。

live()を使用することはjQueryの古い方法でした。 bind()のようにイベントをバインドするために使用されましたが、コードが実行されたときにDOMの要素にバインドするだけでなく、DOMの変更をリッスンし、将来一致する要素にもイベントをバインドします。これは、DOM操作を行っていて、後でDOMに削除/更新/追加されるかもしれないが、DOMが最初にロードされたときに存在しないいくつかの要素にイベントが存在する必要がある場合に便利です。

今ではlive()が償却される理由は、実装が不適切であるためです。 live()を使用するには、最初にDOMの要素を少なくとも1つ選択する必要がありました（私はそう信じています）。また、関数のコピーが各要素にバインドされて実行されました。要素が1000個ある場合は、コピーされた関数がたくさんあります。

on()関数の作成は、これらの問題を克服することでした。 DOM内で変更されないオブジェクトに単一のイベントリスナーをバインドすることができます（したがって、後でDOMに追加/削除される要素にon()を使用して親オブジェクトにバインドすることはできません）。セレクタと一致する要素までバブリングされたときにのみ関数が実行されるように、要素「フィルタ」を適用します。つまり、1つの要素にバインドされている（コピーではなく）存在する関数が1つだけあることを意味します。つまり、DOM内の「ライブ」イベントを追加する方がはるかに優れています。

...それは違いとは何か、なぜそれぞれの関数が存在し、なぜlive()が償却されるのかです。

Answer 10

onメソッドでは、イベントハンドラはターゲットではなく親要素に関連付けられます。

例：上記の例で$(document).on("click", ".className", function(){});

、クリックイベントハンドラは、文書に添付されています。 そして、イベントバブリングを使用して、誰かがターゲット要素をクリックしたかどうかを知ることができます。