Brief analysis on the problem of repeated binding of an element in jquery

One night when I was writing code, a bug occurred. I thought about it for a long time and didn't know what the problem was. After many twists and turns, the process in the middle is not mentioned, finally let me in the near collapse of the time, found the reason. It turns out that because the same jquery element can be bound repeatedly, it's easy to make mistakes when using nested bindings. Such as code:

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

<button class="test"> Upper bound </button> 
<button class="last"> Next binding </button> 

When I click the first button, it is ok to click the second button. However, if the first button is clicked many times (n times) before the page refreshes, then the second button is clicked, and the problem occurs. The alert dialog box will pop up (n).

Solution: unbind on an element that is bound repeatedly, unbind(), Such as:

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

 
This way, no matter how many times you click on the first button, clicking on the second one will only bring up an alert dialog.

Here are two more that are associated with bind(), one() and live().
 
The one() method attaches one or more event handlers to the selected element and specifies the function to run when the event occurs. When using the one() method, each element can only run the event handler function once. In layman's terms, just use it once.

As for the live (), citing others speak (http://www.cnblogs.com/wujilong/articles/1866834.html) :
When you use jQuery for AJAX operations, the newly generated element events will be invalidated, and sometimes you have to rebind the events, but doing so is cumbersome. For example, JS validation of comment content will be invalid after comments are paginated. There was a plug-in that solved this problem before query1.3 (link: http://jquery.com/), and query1.3 added a live() method, as explained in the manual below:

New methods in jQuery 1.3. Bind an event handler (such as a click event) to all elements that match now and in the future. You can also bind custom events.

Unlike bind(), live() can bind only one event at a time.

This approach is similar to traditional bind, except that binding events with live binds events to all current and future elements on the page (using delegation). For example, if you bind the click event to all the li on the page with live. So when you add a li to the page later, the click event is still available for the newly added li. There is no need to re-bind events to this newly added element.

.live() is similar to the popular liveQuery plug-in, but with the following major differences:

To remove an event bound with live, use the die method

Usage examples:
< Div class = "myDiv" > < / div>

Jquery:
$(" myDiv "). The live (" click ", function () {
Alert (" clicked!" );
});

If you use javascript to dynamically create an element with class mydiv, clicking on the element still pops up. Why do you have it with live? This is because jquery takes advantage of the bubbling mechanism of events, directly binds the event to the document, and then finds the source of the event through event.target. This is not the same as the jquery.livequery plug-in, which checks every 20 milliseconds and rebinds the event if there is a new generation.

There are advantages and disadvantages to using live: