ASP.NET - jQuery不在UpdatePanels中工作

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.

我无法在“asp:UpdatePanel”中调用jQuery函数。根据下面给出的代码,我想在div元素“.popup-body”上添加一个类,但它不起作用。在另一边“警报();”作品。

My jQuery Code:

我的jQuery代码:

$(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>

1 个解决方案

#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.

UpdatePanel在回发时呈现一个全新的DOM元素。因此,每次UpdatePanel进行回发或更新时,事件监听器都将丢失。

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

为避免这种情况,您可以使用.on而不是.click绑定到dom中较高的元素。

$("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.

在上面的例子中,我们绑定到body。但是你可以绑定到更接近.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.

并绑定到UpdatePanel外部的容器。

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

#1