Jquery Click event does not fire on 2nd time in UpdatePanel

Question

My theme is to display a div showing message "Saved Successfully.." and hide automatically after 2 seconds.
I have done almost all the things and all works fine, but only for the first click. On the 2nd click, it only shows DIV message enter code here "Saved Successfully.." but does not execute the query as it should. I searched a lot on internet but found nothing use full. My code is :

<script type='text/javascript' src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'>
    </script> 
    <script type="text/javascript">
    $(document).ready(function () { 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () { // re-bind your jquery events here
            $("#btn_Save").click(function (e) {
            e.preventDefault();
            $('#showMessage').fadeIn(100);
            setTimeout(function () { $('#showMessage').fadeOut(500); }, 2000);
            })
        })
     })
    </script

>

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
            <ContentTemplate>
                <div id="msg" style="display:none" ><p>Saved Successfully...</p></div>                                         <div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/>        
        </div
            <div id="showMessage" style="display:none;"><p>Saved Successfully...</p>   </div>  
            </ContentTemplate> 
                <Triggers >
                  <%--<asp:AsyncPostBackTrigger ControlID="Button1" />--%>
                </Triggers>
        </asp:UpdatePanel>
</form>

protected void btn_Save_Click(object sender, EventArgs e)
{
   //Query to save data into database

}

Can be a timing issue can you change your code to:$('#showMessage').fadeIn('slow', function() { setTimeout(function () { $('#showMessage').fadeOut(500); }, 2000); }) — Irvin Dominin, Aug 24 '13 at 19:32

score 0 · Answer 1 · edited May 23 '17 at 11:49

Bind the event initially in document.ready and rebind outside:

<script type="text/javascript">
    $(document).ready(function () {
            $("#btn_Save").click(function (e) {
            e.preventDefault();
            $('#showMessage').fadeIn(100);
            setTimeout(function () { $('#showMessage').fadeOut(500); }, 2000);
            })

    })

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () { // re-bind your jquery events here
        $("#btn_Save").click(function (e) {
        e.preventDefault();
        $('#showMessage').fadeIn(100);
        setTimeout(function () { $('#showMessage').fadeOut(500); }, 2000);
        })
    })

</script>

This post may help: jQuery $(document).ready and UpdatePanels?

Jquery Click event does not fire on 2nd time in UpdatePanel

1 Answers1