jquery updatepanel losing bindings + suggested fix = reeealllly slooooow resuuuult

So this known problem with jquery bindings being lost on a asp.net updatepanel update has a lot of detail when searched for on google / SO.

There are a few suggested solutions. Here's the code I have for the initial jquery carousel set up.

$(function() {
          $('.carousel-sizes').jcarousel({ scroll: 3 });
          $('.carousel-pics').jcarousel({ scroll: 1 });
      });

Which works fine. Once an update panel is hit though it breaks as the jquery bindings are lost apparently. So here开发者_开发问答's the fix I've applied.

     if (typeof (Sys) != "undefined") {
          prm = Sys.WebForms.PageRequestManager.getInstance();
          Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);
          Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
      }


      function InitializeRequest(sender, args) {
      }

      function EndRequest(sender, args) {

          $('.carousel-sizes').jcarousel({ scroll: 3 });
          $('.carousel-pics').jcarousel({ scroll: 1 });
      }

Which works but the update panel is now unusably slow.

This is a .net 3.5 page using a masterpage, the scriptmanager is declared in the masterpage (with EnablePartialRendering set to true just in case) and the javascript code in either the master page or the content page (makes no difference as it's slow on either page). Latest version of Jquery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

I've added the above code to either the master page / content page at the top and it doesn't work. Add it to the bottom of either page (just before BODY closing tag, or the CONTENT closing tag) and it works but is uselessly slow.

I've debugged and my page isn't doing anything massively intensive as far as .net is concerned, debugging goes through the relevant events and then hangs for about 3-4 seconds before the update panel refreshes.

Any ideas?

I'm not sure if this will solve your problem, but ASP.NET provides an event which you can use to bind eventhandlers after an UpdatePanel has changed. Also, it would be wise to define some context for the jQuery selector to avoid traversing the DOM of your entire page. Try defining the following method.

function pageLoad() { 
  var panel = $("#<$= UpdatePanel.ClientID %>");
  $('.carousel-sizes', panel).jcarousel({ scroll: 3 });
  $('.carousel-pics', panel).jcarousel({ scroll: 1 });
} 

You'll need to change UpdatePanel.ClientID to the ID of your UpdatePanel-control.