Analysis on repeated binding of an element in jquery _ jquery-js tutorial

This article mainly introduces the repeated binding of an element of jquery in detail. If you need a friend, please refer to it and hope to help you write code one night, I suddenly got a bug and thought for a long time I didn't know where the problem was (it was actually a very simple problem, but I didn't know it because I was a cainiao ). After several twists and turns, the process in the middle won't be mentioned, and finally let me find the cause when I crash quickly. It turns out that the same jquery element can be bound repeatedly. When nested binding is used, errors may occur. Such as code:

The Code is as follows:

$ ('. Test'). bind ('click', function (){
$ ('. La'). bind ('click', function (){
Alert ('nihao ');
});
});

Upper-level binding
Next-level binding

When I click the first button and then click the second button, there is no problem. However, if you click the first button multiple times (n times) before refreshing the page, then click the second button again. The problem will pop up (n times) alert dialog box.

Solution: unbind the elements that will be repeatedly bound, that is, unbind (),For example:

The Code is as follows:

$ ('. Test'). bind ('click', function (){
$ ('. La'). unbind ('click'). bind ('click', function (){
Alert ('nihao ');
});
});

In this way, no matter how many times you click the first button and then click the second button, only an alert dialog box will pop up.

Here we will introduce two associated bind (): one () and live ().

The one () method attaches one or more event handlers to the selected element and specifies the function that runs when an event occurs. When the one () method is used, each element can only run an event processor function once. In layman's terms, you just need to use it once.

As for live (), reference what others say (http://www.cnblogs.com/wujilong/articles/1866834.html ):
When jQuery is used for AJAX operations, the newly generated element event becomes invalid. Sometimes, you have to re-bind the event, but this is very troublesome. For example, the JS verification of the comment content after the comment page is invalid. Before jQuery1.3 there was a plug-in that would solve this problem http://jquery.com/, jQuery1.3 added a live () method, which is described in the Manual below:

The method added in jQuery 1.3. Bind an event handler (such as a click event) to all current and future matching elements ). You can also bind custom events.

Currently, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, and keyup are supported.

Blur, focus, mouseenter, mouseleave, change, and submit are not supported.

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

This method is similar to the traditional bind method. The difference is that using live to bind events will bind events to all current and future elements on the page (using the delegate method ). For example, if you bind a click event to all the likes on the page with live. When a new li is added to this page, the click event is still available for the newly added li. Instead of re-binding events to the newly added elements.

. Live () is similar to the popular liveQuery plug-in, but there are several major differences:

•. Live currently only supports a subset of all events. For more information about the list, see the preceding description.
•. Live does not support callback functions in the "no event" style provided by liveQuery .. Live can only be bound to event handlers.
•. Live does not have "setup" or "cleanup" processes. Because all events are delegate rather than directly bound to elements.

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

Usage example:

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

If you use javascript to dynamically create an element whose class is myp, the click element will still pop up. Why is live available? This is because jqueryuses the false mechanism of the event and directly binds the event to the documentfile. Then, use event.tar get to find out the source of the event. This is different from the jquery. livequery plug-in. jquery. livequery performs a check every 20 milliseconds, and rebinds an event if any new generation occurs.

Of course, using live has the following advantages and disadvantages:

Benefits:When elements are updated, you do not need to define events repeatedly.
The downside is:Binding an event to a document calls every element on the page once. improper use may seriously affect performance. Blur, focus, mouseenter, mouseleave, change, and submit are not supported.