web-dev-qa-db-ja.com

.on（ 'click'）と.click（）の違い

次のコードに違いはありますか？

$('#whatever').on('click', function() {
     /* your code here */
});

そして

$('#whatever').click(function() {
     /* your code here */
});
jqueryclick
481
bgcode

違いは使用パターンにあります。

前のcanはメモリ使用量が少なく、動的に追加された要素に対して機能するため、.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);
});

上記のように、separateハンドラはセレクタにマッチするすべての要素に対して作成されます。つまり

  1. 一致する要素が多いと、同じハンドラが多数作成されるため、メモリ使用量が増加します。
  2. 動的に追加されたアイテムにはハンドラがありません。つまり、上記のHTMLでは、新しく追加された "Alert！"です。ハンドラを再バインドしない限り、ボタンは機能しません。

.onを使うとき

$("div#container").on('click', 'button.alert', function() {
    alert(1);
});

上記では、動的に作成されたものも含めて、セレクタに一致するすべての要素のsingleハンドラが使用されます。

... .onを使うもう一つの理由

Adrienが以下にコメントしたように、.onを使用するもう一つの理由は名前空間イベントです。

.on("click", handler)を使ってハンドラを追加する場合、通常は.off("click", handler)を使ってハンドラを削除します。明らかにこれはあなたが関数への参照を持っている場合にのみ機能します。あなたは名前空間を使う：

$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });

バインド解除による

$("#element").off("click.someNamespace");
704
andreister

次のコードに違いはありますか？

いいえ、質問の2つのコードサンプルに機能的な違いはありません。 .click(fn)は.on("click", fn)の "ショートカットメソッド"です。 .on() のドキュメント

.click() のように、イベントハンドラをアタッチまたはトリガするために使用できるいくつかのイベントのための速記方法があります。速記方法の完全なリストについては、 イベントカテゴリ を参照してください。

.on()はselectorパラメータを渡すことで デリゲートイベントハンドラ を作成できるという点で.click()と異なりますが、.click()はそうではありません。 .on()がselectorパラメータなしで呼び出されると、.click()とまったく同じように動作します。イベントの委任が必要な場合は.on()を使用してください。

33
gilly3

jQuery 1.7以降、.on()はすべてのイベントバインディングを行うための推奨される方法です。 .bind()と.live()の両方のすべての機能を1つの関数にまとめて、異なるパラメーターを渡すと動作が変わります。

あなたがあなたの例を書いたように、両者の間に違いはありません。どちらもハンドラを#whateverのclickイベントにバインドします。必要に応じて、on()を使用すると、#whateverの子によって発生したイベントを単一のハンドラ関数に委任することができます。

// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });
21
Interrobang

他の答えで述べたように：

$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })

ただし、.on()は.click()がサポートしていない他のいくつかのパラメータの組み合わせをサポートしているため、イベントの委任を処理できます（.delegate()と.live()の後継）。

（そして明らかに "keyup"や "focus"などのための他の似たようなショートカット方法があります。）

私が特別な答えを掲載しているのは、.click()をパラメータなしで呼び出すとどうなるかを言及するためです。

$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");

.trigger()を直接使用する場合は、追加のパラメータやjQueryイベントオブジェクトを渡すこともできますが、これは.click()ではできません。

また、jQueryのソースコード（jquery-1.7.1.js）を見ると、内部的に.click()（または.keyup()など）関数が実際に.on()または.trigger()を呼び出すことがわかります。明らかにこれは、あなたがそれらが本当に同じ結果をもたらすことを保証することができることを意味します、しかしそれはまた.click()を使うことが少しより多くのオーバーヘッドを持つことを意味します - 心配することやほとんどの状況で考えることさえ何もしません。 。

編集：最後に、.on()は一行で同じ関数にいくつかのイベントを束縛することを可能にします、例えば：

$("#whatever").on("click keypress focus", function(){});
17
nnnnnn

いいえ、ありません。
on()のポイントは他のオーバーロードとショートカットメソッドを持たないイベントを処理する能力です。

9
SLaks

それらは同じように見えます... click（） 関数からのドキュメンテーション：

このメソッドは.bind（ 'click'、handler）のショートカットです。

on（） 関数からのドキュメント

JQuery 1.7以降、.on（）メソッドはイベントハンドラをアタッチするために必要なすべての機能を提供します。古いjQueryイベントメソッドから変換する方法については、.bind（）、.delegate（）、および.live（）を参照してください。 .on（）でバインドされたイベントを削除するには、.off（）を参照してください。

8
dana

.clickイベントは、要素がレンダリングされたときにのみ機能し、DOMの準備が整ったときに読み込まれた要素にのみ添付されます。

.onイベントはDOM要素に動的に添付されます。これは、（DOMの準備が完了した後で）ajaxリクエストなどでレンダリングされるDOM要素にイベントを添付する場合に役立ちます。

7
Ramesh kumar

ここでは、クリックイベントを適用するさまざまな方法のリストを取得します。それに応じて適切なものを選択するか、クリックが機能していない場合はこれらの中から別の方法を試してください。

$('.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
})
4
Must Keem J

彼らは今やclick（）を非推奨にしているので、続けるのが一番良い（ 'click'）

2
James Soper

インターネットや一部の友人から学んだ限りでは、動的に要素を追加するときに.on（）が使用されます。しかし、私はそれをクリックイベントがnode.jsにAJAXを送信し、リターンで新しい要素を追加する簡単なログインページでそれを使用したとき、それはマルチAJAX呼び出しを呼び出し始めました。私がそれをclick（）に変更したとき、すべてがうまくいった。実際に私は前にこの問題に直面していませんでした。

1
Alper Bilgil
$('.UPDATE').click(function(){ }); **V/S**    
$(document).on('click','.UPDATE',function(){ });

$(document).on('click','.UPDATE',function(){ });
  1. $（ '。UPDATE'）より効果的です。（function（）{}）をクリックしてください。
  2. より少ないメモリを使用でき、動的に追加された要素に対して機能します。
  3. フォームの行データのEDIT OR DELETE DATA時に、編集および削除ボタンで動的にフェッチされたデータがJQueryイベントを生成しない場合、その時の$(document).on('click','.UPDATE',function(){ });は事実上jqueryを使用したフェッチデータと同じように機能します。更新時または削除時にボタンが機能しない：

enter image description here

0
Devang Hire