[Accumulate by bit] solution to jquery binding events failure after updatepanel update

ArticleDirectory

• References & further reading

Background

After receiving a new feature from the lead, you can perform some personalized operations on the menu bar of the system (when you move the cursor to the navigation menu, a sub menu appears, when you move to another menu option, the sub-menu of this option is displayed, and other sub-menus are hidden. The second step is to fix the menu and its sub-menu when you click a menu option with the mouse. When you move the mouse out of the range of all menu options, the sub-menu is still displayed, click Cancel again ).

The original navigation bar was implemented using the hovermenuextender Server Control of ASP. NET Ajax. We know that the advantages of server-side controls are rapid development, but the disadvantage is that they cannot be customized, and the efficiency is also a problem. At first, we planned to modify it based on the original one, but we found that the control could not meet our personalized needs. All of them decided to use jquery to implement the control and stop using it. The advantage is that you do not need to modify the background.CodeYou only need to add JS scripts to the front end. The navigation bar is implemented on the master page. Therefore, the solution I use is to dynamically bind the mouseenter and mouseleave events provided by jquery to the foreground after HTML is generated on the page.

We know that there are many ways to bind events through jquery (one, Tigger, on, Delegate, live, bind, and their corresponding methods for detaching events). The following three methods are commonly used, the other is their extension and derivation, as shown below:

1 //Directly register an event:2Target. eventtype (Function(){});3 //Use bind to register events4Target. BIND (eventtype,Function(){});5 //Use delegate to register events6Parenttarget. Delegate (target, eventtype,Function(){});
 

 

The first method is similar to the second method. At the beginning, I used the second method to bind events and quickly achieved the corresponding effect. However, during the test, QA found a bug: when the form submission on the navigation bar page is used and the page is partially refreshed (using updatepanel), the event becomes invalid. At that time, I thought it was a page Script Loading Problem. Later I found it was not because the script has been correctly loaded. The real reason is that with. BIND (), an event processing function will be attached to the element that matches the selector, and no elements will be added later. Therefore, you need to use. BIND () again.

 

Differences between bind and delegate binding events

If the page is partially refreshed and you want to correctly bind the newly generated elements, jquery provides us with more options: the live function provided by version 1.3, the delegate function is provided after version 1.4, but the live function is no longer recommended after version 1.7. For earlier jquery versions, the delegate function can be used to replace live, recommended on functions should be used for Versions later than 1.7. Because jquery 1.4.1 is used in the project, I can only implement it using delegate.

So what is the difference between bind and delegate to bind events? When. BIND () is used, an event processing function will be attached to the element matched by the selector, and no elements will be added later. Therefore, you need to use. BIND () again. The delegate method is implemented through event delegation: the event handler function bound to the ancestor element can respond to events triggered on future generations. Only when this event is actually triggered will the delegate method use the DOM tree to find the corresponding target element. All elements that are subsequently added (partially refreshed) can still be bound to the event. Because ASP. net used by existing projects uses a large number of server-side controls, all containers I select to bind are the parent element "body" of all HTML elements. The core code is as follows:

1$ ("Body"). Delegate (menuselector, 'mouseleave ',Function(){2//Event binding3});
 

 

References & further reading

Jquery 1.9 API documentation

Author:Sunny pig

Source:Http://www.cnblogs.com/IPrograming

The copyright of this article is shared by the author and the blog. You are welcome to repost it, but please indicate the source.