On the problem of repeated binding of a certain element in jquery

  This article is mainly on the jquery a certain element of the repeated binding of the issue of a detailed introduction, the need for friends can come to the reference, I hope to help you.

One night to write code, suddenly out of the bug, think for a long time did not know where the problem is (in fact, is very simple question, but because I was a rookie, so do not know). After several twists and turns, this process is not mentioned, finally let me in the fast collapse, found the reason. It turns out that the same jquery element can be repeatedly bound, and when nested bindings are used, error prone. such as code:      code as follows: $ ('. Test '). Bind (' click ', Function () {       $ ('. Last '). bind (' click ', function () {            alert (' Nihao ');       }); });    <button class= "Test" > Upper bound </button>  <button class= "Last" > Next-level binding </button>    When I click on the first button, then click on the second button, there is no problem. If you click the first button several times before the page is refreshed, click the Second button, and then the problem pops up (n) the Alert dialog box.     WORKAROUND: Perform a binding on an element that is repeatedly bound, that is, unbind (), such as the:  copy code as follows: $ ('. Test '). Bind (' click ', Function () {       $ ('. Last '). Unbind (' click '). Bind (' click ', Function () {            alert (' Nihao ');       });     this way, no matter how many times the first button is clicked, and then the second click, only an alert dialog box pops up.     Here are two associated with bind (), one (), and Live ().      One() method attaches one or more event handlers for the selected element, and the function that runs when the event occurs. When you use the one () method, you can only run an event handler function once per element. In layman's terms, just use it once.     As for Live (), refer to someone else's (http://www.cnblogs.com/wujilong/articles/1866834.html):  Usually when using jquery for AJAX operations, the newly generated element event is invalidated, sometimes having to rebind the event, but this is cumbersome. For example, comments after pagination on the content of the JS validation will be invalidated. There is a plugin to solve this problem before jQuery1.3 http://jquery.com/, jQuery1.3 added a live () method, the following is a manual note:   jquery 1.3 new methods. Bind an event handler function (such as the Click event) to all current and future matching elements. Custom events can also be bound.   currently supports click, DblClick, MouseDown, MouseUp, MouseMove, MouseOver, Mouseout, KeyDown, KeyPress, KeyUp.   does not support blur, Focus, MouseEnter, MouseLeave, change, submit   and bind (), Live () can only bind one event at a time.   This approach is similar to traditional bind, except that using live to bind events gives all current and future elements of the page binding events (using delegates). For example, if you bind the click event to all the Li on the page with live. So when you add an Li to this page later, the Click event for this newly added Li is still available. Without having to give this newly added element binding event.   Live () is similar to popular livequery Plug-ins, but there are a few major differences:   .live currently supports only a subset of all events, and the support list references the above instructions. .live does not support the "no event" style callback function provided by Livequery. Live can only bind event handler functions. .live There is no process of "setup" and "cleanup". Because all events are delegated rather than directly bound to the element.   To remove live-bound events, use the Die method   Usage Example: <div class= "mydiv" ></div>   jquery: $ (". Mydiv"). Live ("Click", Function () {alert ("clicked!");});   If you are using JavaScript to dynamically create an element with class as mydiv, the click Element will still pop up. Why do you have it after you use live? This is because jquery uses the bubbling mechanism of events to bind events directly to the document and then find out the source of the event through Event.target. This is not the same as the Jquery.livequery plug-in, which jquery.livequery every 20 milliseconds and then rebind the event if there is a new build.   using live has its advantages and disadvantages: The   advantage is that it does not have to define events repeatedly when updating elements. The downside: binding events to the document will call every element on the page once, such as improper use can seriously affect performance. and does not support blur, Focus, MouseEnter, MouseLeave, change, submit.