Home > Developer > Web Develop
question: recently, when using ASP. NET-free commit scriptmanager, I found a problem that conflicted with some of the event functions and local refreshes I wrote with jquery. Through the online collection, found that many people have encountered the same problem. Finally, the solution is found, and I would like to share its solution for everyone's reference.
Problem Solving methods:
Method 1, both implementations can achieve the page without refreshing effect, so you can keep one of them;
Method 2, if you must mix the two applications, then the jquery binding event is to pay attention to some
We usually bind events in jquery in the following three ways: Take the Click event as an example
(1) Target.click (function () {});-----and pure JS binding events no difference.
(2) Target.bind ("Click", Function () {});-----only controls that already exist on the page
(3) target.live ("Click", Function () {}),------Use event delegates to bind events to the root node of the DOM tree instead of directly binding on an element so that the newly added elements can be bound by event bubbling.
Here's a brief description of how jquery binds events through bind and live two ways
The live method is actually a variant of the Bind method, its basic function is the same as the function of the Bind method, is to bind an event for an element, but the bind method can only give the existing element binding event, for the subsequent use of JS and other methods of the new generation of invalid elements, The live method compensates for this flaw in the Bind method, which can also bind the corresponding event to the resulting element. So how does this feature of the live method be implemented? The following is a discussion of the implementation principle.
The reason that the live method can bind the corresponding event to the later generated element is attributed to the event delegate, which means that events bound to ancestor elements can be used on their descendant elements. The processing mechanism of the live method is to bind the event to the root node of the DOM tree, rather than binding it directly on an element. Give an example to illustrate:
$ (". ClickMe"). Live ("click", FN);
$ ("Body"). Append ("<div class= ' ClickMe ' > Steps </div>" To test the Live method);
When we click on this new element, the following steps occur in turn:
(1) Generate a click event to be passed to the DIV for processing
(2) Because no event is directly bound to the Div, the event bubbles directly to the DOM tree
(3) The event continues to bubble until the root node of the DOM tree is bound to the Click event by default on the root node
(4) Execute the Click event bound by Live
(5) Detects whether the object that binds the event exists, and whether the bound event needs to be executed. The detection event object is detected by the
$ (event.target). Closest ('. ClickMe ') can find a matching element to implement.
(6) Pass the test of (5) to execute the bound event if the object that binds the event exists.
Because the live method detects the existence of the object that binds the event only when the event occurs, the live method can implement the subsequent addition of the element and also implement the binding of the event. In contrast, bind determines whether the element that binds the event exists at the time the event is bound, and binds to the current element only, not to the parent node.
Presumably to this, we have already understood the cause of the above problems, so the best way to solve is to change its event binding method can!
The following is a simple example:
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
