jquery not working after async postback

Question

i am doing async postback using updatepanel. after async postback jQuery functionality not working.I'm using jQuery to wire up some mousedown mouseenter effects on html table cells that are inside an UpdatePanel. The events are bound in $(document).ready

     <script type="text/javascript">

                $(function ()



     {
    $(".csstablelisttd").mousedown(function (e)
                        {
    //mouse down code
    });
 $(".csstablelisttd").mouseenter(function (e)
                        {
    //mouse entercode
    });
                        $("#contentPlaceHolderMain_btnFix").click(function (e)
                        {alert("Alert");//here alert is generate two times an then postback occurs
                           //btn click code
                        }
                    }

            </script>

    <asp:UpdatePanel ID="updatePanelTableAppointment" runat="server">
                            <ContentTemplate>
         <table id="table" runat="server">
             //table data
            </table>

                        </ContentTemplate><Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnFix" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>

Answer 1

asp:UpdatePanel replaces the content with the result returned from the server. This means all hooked events previously will not work after a post back.

Use jQuery.on() instead.

For example:

<script type="text/javascript">
$(function () {

    $("#table").on("mousedown mouseenter", ".csstablelisttd", function (e) {
        //mouse down AND mouse enter code
    });

    $("#contentPlaceHolderMain_btnFix").on("click", function (e) {
        alert("Alert");//here alert is generate two times an then postback occurs
        //btn click code
    });
});
</script>

Note: if your mouse down and mouse enter code are different, split them out.

Do the same for every event hook you include that will exist within the UpdatePanel .

Answer 2

You will have to add event handler for ajax endRequest provided by Toolkit. Read more over here

Add In Javascript block that executes on page load.

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);

function endRequestHandle(sender, Args)
{
     alert("After ajax call");
}