ASP.NET – jQuery is not Working in UpdatePanels

Question

I am unable call jQuery functions within "asp:UpdatePanel". As per the code given below I want to add a class on div element ".popup-body" but its not working. On the other side "alert();" works.

My jQuery Code:

$(document).ready(function () {
    $(".popup-body .btn").click(function () {
        //alert("it works");
        $(this).closest(".popup-body").addClass("loading-content");
    });
});

My HTML:

    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div class="testDiv">test div</div>
            <div class="popup-body" id="divBody" runat="server">
                <div class="textbox">
                    <label>First Name:</label>
                    <asp:TextBox runat="server" ID="txtFname" />
                </div>
                <div class="footer">
                    <asp:Button Text="Save" CssClass="btn" ID="btnSave" runat="server" />
                    <asp:Button Text="Clear" CssClass="btn" runat="server" ID="btnClear" />
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

I have read many articles and tried different solutions like following, but failed

// JavaScript funciton to call inside UpdatePanel
    function jScript() {
        $("#click").click(function () {
            alert("Clicked Me!");
        });
    }
//Code placed within "asp:updatepanel"
<script type="text/javascript" language="javascript">
            Sys.Application.add_load(jScript);
</script>

Answer 1

UpdatePanel renders a completely new DOM-element on postback. Therefore the event-listener will be lost everytime the UpdatePanel makes a postback or updates.

To avoid this you can bind to a element higher up in the dom by using .on instead of .click .

$("body").on("click", ".popup-body .btn", function () {
    //alert("it works");
    $(this).closest(".popup-body").addClass("loading-content");
});

In the example above we bind to body instead. But you can bind to a element closer to .popup-body .

<div class="my-container">
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div class="testDiv">test div</div>
            <div class="popup-body" id="divBody" runat="server">
                <div class="textbox">
                    <label>First Name:</label>
                    <asp:TextBox runat="server" ID="txtFname" />
                </div>
                <div class="footer">
                    <asp:Button Text="Save" CssClass="btn" ID="btnSave" runat="server" />
                    <asp:Button Text="Clear" CssClass="btn" runat="server" ID="btnClear" />
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

And bind to the container outside of UpdatePanel .

$(".my-container").on("click", ".popup-body .btn", function () {
    //alert("it works");
    $(this).closest(".popup-body").addClass("loading-content");
});