Question

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

我的jQuery代码：

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

我的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>

我阅读过很多文章并尝试了不同的解决方案，如下所示，但失败了

// 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在回发时呈现一个全新的DOM元素。因此，每当UpdatePanel进行回发或更新时，事件监听器都将丢失。

要避免这种情况，您可以使用.on代替.click绑定到dom中较高的元素。

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

在上面的示例中，我们将绑定到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>

并绑定到UpdatePanel之外的容器。

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

ASP.NET - jQuery不在UpdatePanels中工作

1 个答案: