A brief analysis of the problem of repeated binding of a certain element in jquery_jquery

One night when I was writing code, a bug suddenly appeared. After thinking about it for a long time, I didn’t know where the problem was (it was actually a very simple problem, but I was still a novice, so I didn’t know). After many twists and turns, not to mention the process in between, I finally discovered the reason when I was about to collapse. It turns out that the same jquery element can be bound repeatedly, and when nested binding is used, errors are prone to occur. For example, the code:

Copy the code The code is as follows:

$('.test').bind ('click',function(){
$('.last').bind('click',function(){
alert('nihao');
});
} );

Previous binding
Next level binding

When I click the first button, and then click the second button, there is no problem. But if the first button is clicked multiple times (n times) before the page is refreshed, and then the second button is clicked at this time, there will be a problem, and (n) alert dialog boxes will pop up.

Solution: Unbind the element that will be bound repeatedly, that is, unbind(),such as:

Copy code The code is as follows:

$('.test').bind('click',function(){
$ ('.last').unbind('click').bind('click',function(){
     alert('nihao');
  });
});

このようにすると、最初のボタンを何度クリックしても、2 番目のボタンをクリックすると、警告ダイアログ ボックスのみが表示されます。

ここでは、bind()、one()、live() に関連するものをさらに 2 つ紹介します。

one() メソッドは、選択した要素に 1 つ以上のイベント ハンドラーをアタッチし、イベントの発生時に実行する関数を指定します。 one() メソッドを使用する場合、イベント ハンドラー関数は要素ごとに 1 回だけ実行できます。平たく言えば、それは一度だけしか機能しません。

live() については、他の人が言ったことを引用します (http://www.cnblogs.com/wjilong/articles/1866834.html):
通常、AJAX 操作に jQuery を使用する場合、新しく生成される要素イベントが無効になってしまい、イベントを再バインドしなければならない場合がありますが、これは非常に面倒です。たとえば、コメントがページ分割された後、コメント内容の JS 検証は失敗します。 jQuery1.3 より前には、この問題を解決するプラグインがありました http://jquery.com/。jQuery1.3 では、マニュアルに次のような説明が追加されました。

jQuery 1.3 の新しいメソッド。イベント ハンドラー (クリック イベントなど) を現在および将来の一致するすべての要素にバインドします。カスタム イベントをバインドすることもできます。

現在、クリック、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、keydown、keypress、keyup をサポートしています。

ぼかし、フォーカス、mouseenter、mouseleave、change、submit

はまだサポートされていません

bind() とは異なり、live() は一度に 1 つのイベントのみをバインドできます。

このメソッドは従来のバインドと非常に似ていますが、ライブを使用してイベントをバインドすると、イベントがページ上の現在および将来のすべての要素にバインドされる点が異なります (委任を使用)。たとえば、live を使用してクリック イベントをページ上のすべての li にバインドするとします。その後、将来このページに li が追加された場合でも、この新しく追加された li のクリック イベントは引き続き使用できます。この新しく追加された要素にイベントを再バインドする必要はありません。

.live() は、人気のある liveQuery プラグインに非常に似ていますが、次のような大きな違いがあります:

•.live は現在、すべてのイベントのサブセットのみをサポートしています。サポートされているリストについては、上記の説明を参照してください。
•.live は、liveQuery が提供する「イベントレス」スタイルのコールバック関数をサポートしていません。 .live はイベント処理関数のみをバインドできます。
•.liveには「セットアップ」と「クリーンアップ」のプロセスがありません。すべてのイベントは要素に直接バインドされるのではなく委任されるためです。

ライブにバインドされたイベントを削除するには、die メソッドを使用してください

使用例:

jquery:
$(“.myDiv”).live(“click”, function(){
alert(“clicked!”);
});

JavaScript を使用してクラス mydiv の要素を動的に作成する場合でも、要素をクリックするとポップアップが表示されます。ライブ使用後にこの問題が発生するのはなぜですか?これは、jquery がイベント バブリング メカニズムを使用してイベントをドキュメントに直接バインドし、event.target を通じてイベントのソースを見つけるためです。これは jquery.livequery プラグインとは異なります。jquery.livequery は 20 ミリ秒ごとにチェックし、新しいイベントがある場合はイベントを再バインドします。

もちろん、ライブでの使用には利点と欠点があります:

利点は次のとおりです。 要素を更新するときにイベントを繰り返し定義する必要がありません。
欠点は次のとおりです。イベントをドキュメントにバインドすると、ページ上のすべての要素に対してイベントが 1 回呼び出され、パフォーマンスに重大な影響を及ぼします。また、ぼかし、フォーカス、mouseenter、mouseleave、change、submit はサポートされていません。