jQuery $(document).ready and UpdatePanels?

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 use Microsoft's PageRequestManager (available if you have an update panel on your page) to re-subscribe every update.

$(document).ready(function() {    // bind your jQuery events here initially});var prm = Sys.WebForms.PageRequestManager.getInstance();prm.add_endRequest(function() {    // re-bind your jQuery events here});

The PageRequestManager is 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.

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

A better option you may have, depending on your needs, is to use jQuery's .on(). These method 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 would be unreasonable to refactor to use .delegate() or .on(), so in those cases, you're better off re-subscribing.

<script type="text/javascript">        function BindEvents() {            $(document).ready(function() {                $(".tr-base").mouseover(function() {                    $(this).toggleClass("trHover");                }).mouseout(function() {                    $(this).removeClass("trHover");                });         }</script>

The area which is going to be updated.

<asp:UpdatePanel...<ContentTemplate     <script type="text/javascript">                    Sys.Application.add_load(BindEvents);     </script> *// Staff*</ContentTemplate>    </asp:UpdatePanel>

User Control with jQuery Inside an UpdatePanel

This isn't a direct answer to the question, but I did put this solution together by reading the answers that I found here, and I thought someone might find it useful.

I was trying to use a jQuery textarea limiter inside of a User Control. This was tricky, because the User Control runs inside of an UpdatePanel, and it was losing its bindings on callback.

If this was just a page, the answers here would have applied directly. However, User Controls do not have direct access to the head tag, nor did they have direct access to the UpdatePanel as some of the answers assume.

I ended up putting this script block right into the top of my User Control's markup. For the initial bind, it uses $(document).ready, and then it uses prm.add_endRequest from there:

<script type="text/javascript">    function BindControlEvents() {        //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.        //Your code would replace the following line:            $('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');                }    //Initial bind    $(document).ready(function () {        BindControlEvents();    });    //Re-bind for callbacks    var prm = Sys.WebForms.PageRequestManager.getInstance();     prm.add_endRequest(function() {         BindControlEvents();    }); </script>

So... Just thought someone might like to know that this works.