.on（ 'click'）と.click（）の違い
回答:
違いは使用パターンにあると思います。
前者の方がメモリ使用量が少なく、動的に追加された要素を処理できるため、私はそれを優先.onします。.click
次のhtmlを検討してください。
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>新しいボタンを追加する場所
$("button#add").click(function() {
var html = "<button class='alert'>Alert!</button>";
$("button.alert:last").parent().append(html);
});「アラート！」アラートを表示します。「クリック」または「オン」のいずれかを使用できます。
使うとき click
$("button.alert").click(function() {
alert(1);
});上記の場合、セレクターに一致するすべての要素に対して個別のハンドラーが作成されます。つまり
- 多くの一致する要素は多くの同一のハンドラーを作成し、メモリのフットプリントを増やします
- 動的に追加されたアイテムにはハンドラーがありません-つまり、上記のhtmlで新しく追加された「アラート！」ハンドラーを再バインドしない限り、ボタンは機能しません。
使うとき .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});上記では、動的に作成された要素を含め、セレクターに一致するすべての要素の単一のハンドラー。
...使用する別の理由 .on
Adrienが以下にコメントしたように、使用するもう1つの理由.onは名前空間付きイベントです。
ハンドラーを追加する場合、.on("click", handler)通常はハンドラーを削除すると、.off("click", handler)そのハンドラーが削除されます。明らかにこれは、関数への参照がある場合にのみ機能します。そうでない場合はどうでしょうか。名前空間を使用します。
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });バインド解除
$("#element").off("click.someNamespace");on('click' ...)、参照stackoverflow.com/a/3973060/759452すなわち。on('click.darkenallothersections' ...)と同時にon('click.displaynextstep' ...)、私が使用して選択したものだけをアンバインドできます.unbind('click.displaynextstep')
on()jQueryのトレンドです。私は更新しなければならなかった$(window).load(function() {});し$(window).on("load", function (e) {})、私はjQueryの3にアップグレードする場合
次のコードに違いはありますか？
いいえ、質問の2つのコードサンプル間に機能的な違いはありません。 .click(fn)の「ショートカットメソッド」です.on("click", fn)。以下からのドキュメント.on()：
.click()イベントハンドラーをアタッチまたはトリガーするために使用できるなど、一部のイベントには省略メソッドがあります。省略メソッドの完全なリストについては、イベントカテゴリを参照してください。
と.on()は異なり、パラメータを渡す.click()ことで委任されたイベントハンドラを作成することがselectorできますが、そうではあり.click()ません。をパラメータ.on()なしで呼び出すとselector、とまったく同じように動作し.click()ます。イベントの委任が必要な場合は、を使用してください.on()。
selectorます。パラメータ.on()なしで呼び出すと、をselector使用した場合に比べてパフォーマンスが向上しません.click()。
.on()jQuery 1.7以降、すべてのイベントバインディングを行うための推奨方法です。これは、両方のすべての機能をロール.bind()し、.live()一つの機能にあなたがそれに異なるパラメータを渡すよう変更が行動という。
例を書いているので、2つの間に違いはありません。どちらもハンドラをのclickイベントにバインドし#whateverます。選択した場合、のon()子によって起動されたイベントを#whatever単一のハンドラー関数に委任できるようにする柔軟性が追加されます。
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });.live()しているのではないですか？また、これはの機能しか持たないという他の回答と矛盾しているようで.click()、今後のイベントには適用されません。
.on()ものを行うことができ.click()ないし、何をすべきか.bind()と.live()行う-それはあなたがそれを呼び出すパラメーター何によって決まります。（いくつかの他の回答には、これも言及した。）注「#whatever内のすべてのリンクにバインド」であることかかわらない何.live()ん、それは何.delegate()ありません。コンテナを指定するのではなく、.live()すべての内部にバインドしdocumentます。また.live()、jQuery 1.7以降では非推奨です。
他の回答で述べたように：
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })ただし、.on()サポートされて.click()いない他のいくつかのパラメーターの組み合わせをサポートしているため、イベントの委任を処理できます（優先.delegate()および.live()）。
（そしてもちろん、「キーアップ」、「フォーカス」などの他の同様のショートカットメソッドがあります。）
追加の回答を投稿する理由は.click()、パラメーターなしで呼び出した場合にどうなるかを言及するためです。
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");.trigger()直接使用する場合、追加のパラメーターまたはjQueryイベントオブジェクトを渡すこともできますが、これはで行えません.click()。
また、jQueryソースコード（jquery-1.7.1.js内）を見ると、内部的に.click()（または.keyup()など）関数が実際に.on()orを呼び出すことがわかります.trigger()。明らかに、これは実際に同じ結果が得られることを保証できることを意味しますが、使用.click()によりオーバーヘッドが少し増えることも意味します。ほとんどの状況で、心配したり、考えたりすることは何もありませんが、異常な状況では理論的には問題になる可能性があります。
編集：最後に、.on()複数のイベントを同じ関数に1行でバインドできることに注意してください。例：
$("#whatever").on("click keypress focus", function(){});.click()。）
いいえ、ありません。
のポイントon()は、他のオーバーロード、およびショートカットメソッドを持たないイベントを処理する機能です。
それらは同じように見えます... click（）関数からのドキュメント：
このメソッドは.bind（ 'click'、handler）のショートカットです
on（）関数のドキュメント：
jQuery 1.7以降、.on（）メソッドは、イベントハンドラーのアタッチに必要なすべての機能を提供します。古いjQueryイベントメソッドからの変換のヘルプについては、.bind（）、. delegate（）、および.live（）を参照してください。.on（）でバインドされたイベントを削除するには、.off（）を参照してください。
.clickvsで一方が他方より優れている理由の良い例です.on
ここでは、クリックイベントを適用するさまざまな方法のリストを取得します。必要に応じて選択するか、クリックが機能しない場合は、これらの中から別の方法を試してください。
$('.clickHere').click(function(){
// this is flat click. this event will be attatched
//to element if element is available in
//dom at the time when JS loaded.
// do your stuff
});
$('.clickHere').on('click', function(){
// same as first one
// do your stuff
})
$(document).on('click', '.clickHere', function(){
// this is diffrent type
// of click. The click will be registered on document when JS
// loaded and will delegate to the '.clickHere ' element. This is
// called event delegation
// do your stuff
});
$('body').on('click', '.clickHere', function(){
// This is same as 3rd
// point. Here we used body instead of document/
// do your stuff
});
$('.clickHere').off().on('click', function(){ //
// deregister event listener if any and register the event again. This
// prevents the duplicate event resistration on same element.
// do your stuff
})$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });
$(document).on('click','.UPDATE',function(){ });- $（ '。UPDATE'）。click（function（）{}）;より効果的です。
- 使用するメモリが少なくなり、動的に追加される要素に対して機能します。
- フォームの行データのEDIT OR DELETE DATA時に、編集および削除ボタンを使用して動的にフェッチされたデータがJQueryイベントを生成しないこと
$(document).on('click','.UPDATE',function(){ });がありました。更新または削除時にボタンが機能しない：
