In asp.net, The ScriptManager built-in Ajax conflicts with jQuery events.

Question:Recently, I found a problem when I submitted ScriptManager without refreshing the content provided by asp.net, that is, it is in conflict with some event functions I wrote using jQuery and partial refresh. Through online cable collection, many people have encountered the same problem. Finally, I found a solution. Here I want to share the solution for your reference.

Solution:

Method 1And both of them can achieve the refreshing effect of the page, so you can keep one of them;

Method 2If you need to use a mixture of the two, you need to pay attention when binding events with jQuery.

We usually use the following three methods to bind events to jQuery: click events.

(1) target. click (function () {}); ----- there is no difference between binding events with pure js

(2) target. bind ("click", function () {}); ----- bind only the control that already exists on the page

(3) target. live ("click", function () {}); ------ use event Delegate to bind an event to the root node of the DOM tree instead of directly binding it to an element, in this way, newly added elements can be bound through event bubbles.

 

The following describes the differences between bind and live methods for jQuery to bind events.

The live method is actually a variant of the bind method. Its basic functions are the same as those of the bind method. They all bind an event to an element, however, the bind method can only bind events to existing elements. It is invalid for elements generated by using JS and other methods afterwards, while the live method just makes up for this defect of the bind method, it can bind the generated elements to corresponding events. So how does the live Method Implement this feature? The following describes how it works.

The reason why the live method can bind the generated elements to the corresponding events is that the "event Delegate, the so-called "event Delegate" means that events bound to the ancestor element can be used on its child element. The processing mechanism of the live method is to bind the event to the root node of the DOM tree, instead of directly binding the event to an element. Here is an example:

$ (". ClickMe"). live ("click", fn );

$ ("Body"). append ("<div class = 'clickme'> steps for testing the live method </div> ");

When we click this new element, the following steps are taken in sequence:

(1) generate a click event and pass it to div for processing.

(2) because no event is directly bound to the div, the event is directly bubbling to the DOM tree.

(3) events are continuously bubbling until the root node of the DOM tree binds the click event to the root node by default.

(4) execute the click Event bound by live.

(5) check whether the Bound event object exists and determine whether to continue binding events. The event object is detected

Whether the matching element can be found in condition (event.tar get). closest ('. clickMe.

(6) through the (5) test, if the Bound event object exists, the bound event will be executed.

The live method checks whether the Bound event object exists only when an event occurs. Therefore, the live method can bind events to new elements or events. In contrast, the bind determines whether the element of the binding event exists in the event binding phase, and only binds the current element instead of the parent node.

 

We have already understood the cause of the above problem, so the best solution is to modify the event binding method!

 

The following is a simple example: