ASP.NET - jQuery不在UpdatePanels中工作

Question

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

我的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"); 
});