Document. Ready and updatepanel (jquery plug-in is invalid, autocomplate event is invalid, jquery event is valid for the first time, and the time is effective after clicking the button)

Recently I am working on some Jquery things, but I have encountered a helpless problem. It has been a long time and I have no clue. FF debugging ~ View ~ Comparison ~, I finally suspected that it was an UpdatePanle problem because I found that the document. ready I wrote was useless.

Finally, find a solution on the Internet. After UpdatePanel is executed, the document. ready method is not executed. You must

Var prm = Sys. WebForms. PageRequestManager. getInstance ();
 
Prm. add_endRequest (function (){
// Rebind your event here

});

The original text is as follows:

I'm using jQuery to wire up some mouseover effects on elements that are inside an UpdatePanel. The events are bound in$(document).ready. For example:

$(function() {      $('div._Foo').bind("mouseover", function(e) {         // Do something exciting     });  }); 

Of course, this works fine the first time the page is loaded, but when the UpdatePanel does a partial page update, it's not run and the mouseover effects don't work any more inside the UpdatePanel.

What's the recommended approach for wiring stuff up in jQuery not only on the first page load, but every time an UpdatePanel fires a partial page update? Shoshould I be using the ASP. NET ajax lifecycle instead$(document).ready?

 

 

Answer:

An UpdatePanel completely replaces the contents of the update panel on an update. This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.

What I 've done to work around this is re-subscribe to the events I need after every update. I use$(document).ready()For the initial load, then this snippet below to re-subscribe every update.

var prm = Sys.WebForms.PageRequestManager.getInstance();  prm.add_endRequest(function() {     // re-bind your jquery events here }); 

ThePageRequestManagerIs a javascript object which is automatically available if an update panel is on the page. you shouldn't need to do anything other than the code above in order to use it as long as the UpdatePanel is on the page.

If you need more detailed control, this event passes arguments similar to how. NET events are passed arguments(sender, eventArgs)So you can see what raised the event and only re-bind if needed.

Read more about the RequestManager here: asp.net/../updatepanelclientscripting.aspx (If using. NET 2.0)

Here is the latest version of the documentation from Microsoft: msdn.microsoft.com/../bb383810.aspx

One other option you may have, depending on your needs is to use jQuery'slive()Event subscriber, or the jQuery pluginlivequery. These methods are more efficient than re-subscribing to DOM elements on every update. read all of the documentation before you use this approach however, since it may or may not meet your needs. there are a lot of jQuery plugins that wocould be unreasonable to refactor to uselive(), So in those cases, you're better off re-subscribing.