淺析jquery某一元素重複綁定的問題_jquery

某天晚上寫程式碼的時候，突然出了bug，想了很久都不知道問題出在哪裡(其實是很簡單的問題，但由於我還是個菜鳥，所以不知道)。幾經周折，這中間的過程就不提了，終於讓我在快崩潰的時候，發現了原因。原來是因為相同jquery元素可以重複綁定，當使用了巢狀綁定的時候，就容易出錯。如程式碼：

複製程式碼 程式碼如下:

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

上一級綁定
下一級綁定


當我點選第一個button時，再點選第二個button，是沒有問題的。但如果在頁面刷新之前，點擊了多次（n次）第一個button的話，此時再點擊第二個button，就出問題了，就會跳出（n個）alert對話框。

解決方法：在會重複綁定的元素上執行解綁，即unbind(),如：

複製程式碼 程式碼如下:

$('.test').bind('click',function(){  ('.last').unbind('click').bind('click',function(){

          alert('nihao');
     })
);
   🎜>
In this way, no matter how many times you click the first button, when you click the second button, only an alert dialog box will pop up.

Here are two more related to 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, the event handler function can only be run once per element. In layman's terms, it only works once.

As for live(), quote what others said (http://www.cnblogs.com/wujilong/articles/1866834.html):
Usually when using jQuery for AJAX operations, newly generated The element events will become invalid, and sometimes you have to rebind the events, but this is very troublesome. For example, the JS verification of the comment content will fail after the comments are paginated. Before jQuery1.3, there was a plug-in that would solve this problem http://jquery.com/. jQuery1.3 added a live() method. The following is the description in the manual:

New method in jQuery 1.3. Bind an event handler (such as 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.

Blur, focus, mouseenter, mouseleave, change, submit

are not supported yet

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

This method is very similar to traditional bind. The difference is that using live to bind events will bind events to all current and future elements on the page (using delegation). For example, if you use live to bind click events to all li on the page. Then when a li is added to this page in the future, the click event of this newly added li is still available. There is no need to re-bind events to this newly added element.

.live() is very similar to the popular liveQuery plugin, but has the following major differences:

•.live currently only supports a subset of all events. Please refer to the description above for the supported list.
•.live does not support the "eventless" style callback function provided by liveQuery. .live can only bind event handling functions.
•.live does not have "setup" and "cleanup" processes. Because all events are delegated rather than directly bound to elements.

To remove events bound with live, please use the die method

Usage example:

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

If you use javascript to dynamically create an element with class mydiv, a pop-up will still appear when you click on the element. Why does it happen after using live? This is because jquery uses the event bubbling mechanism to directly bind the event to the document, and then finds the source of the event through event.target. This is different from the jquery.livequery plug-in. jquery.livequery checks every 20 milliseconds and rebinds the event if there is a new one.

Of course there are advantages and disadvantages to using live:

The advantage is: You don’t have to define events repeatedly when updating elements.
The disadvantage is: Binding the event to the document will call it once for every element on the page. Improper use will seriously affect performance. And it does not support blur, focus, mouseenter, mouseleave, change, submit.