ASP.NET Update Panel stops jquery from working

Question

I have binded jquery events set for mouseenter mouseleave, as well as jquery draggable. The divs are placed in an update panel and when a button is clicked information is sent to the database and the update panel is updated. However when the panel is updated the jquery events no longer work. Any idea as to why this would be the case?

Answer 1

Use live.

$("div").live("mouseenter", function(){
      // do something
    });

Answer 2

try using

function pageLoad(sender, args)
{ 
   // JQuery code goes here
}

instead of

   $(document).ready(function() {
      // JQuery code goes here
   });

This will work when a button that is within an update panel is clicked; it goes to the server and will re-add the jquery when it comes back. However, this does not work with Asynchronous postbacks caused by a control such as the eo:AJAXUploader but combining this with Bryans version you can handle Asynchronous postbacks as well

Answer 3

You can add an Asynchronous trigger to your page to call a JavaScript/jQuery function after any async call.

Place this code in your Page_Load() of your aspx code behind:

//This script handles ajax postbacks, by registering the js to run at the end of *AJAX* requests
Page.ClientScript.RegisterStartupScript(typeof(Page), "ajaxTrigger", "Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);", true);
Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "EndRequest", "function EndRequestHandler(sender, args){AsyncDone();}", true);

This code snippet will specifically call the JavaScript/jQuery function AsyncDone();

Answer 4

Have a look a this blog post from Encosia which gives you a couple of ways of rebinding after async updates. I found this resolved my issue which was similar.