Jquery腳本在ASP.NET中沒有按預期工作UpdatePanel

Question

我正在創建一個嵌套的gridview。我使用的示例來自：http://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx

問題是腳本的「減號」不會刪除嵌套的gridview。似乎發生的事情是「加」功能似乎一次又一次地觸發。

<script type = "text/javascript"> 
     $(document).ready(function() { 
      $("[src*=plus]").on("click", function() { 
       $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>") 
       $(this).attr("src", "images/minus.png");    
      }); 
      $("[src*=minus]").on("click", function() { 
       $(this).attr("src", "images/plus.png"); 
       $(this).closest("tr").next().remove(); 
      }); 

     }); 

我使用一個UpdatePanel（該2個GridView的是內側）。

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
          <ContentTemplate> 
<script type="text/javascript"> 
    Sys.Application.add_load(BindEvents); 
    </script> 
    <asp:GridView ID="GridView1" runat="server" Width = "100%" AutoGenerateColumns = "False" Font-Names = "Arial" CssClass="table table-hover table-bordered" 
          Font-Size = "11pt" AlternatingRowStyle-BackColor = "#F18903" HeaderStyle-BackColor = "#F18A07" AllowPaging ="True" 
          DataKeyNames="Rut" OnPageIndexChanging = "OnPaging" onrowediting="EditCustomer" OnRowDataBound="OnRowDataBound" onrowupdating="UpdateCustomer" onrowcancelingedit="CancelEdit" > 
           <Columns> 
            <asp:TemplateField> 
            <ItemTemplate> 
            <img alt = "" style="cursor: pointer" src="images/plus.png" /> 
             <asp:Panel ID="pnlOrders" runat="server" Style="display: none"> 
             <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" CssClass = "ChildGrid"> 
            <Columns> 
             <asp:BoundField ItemStyle-Width="150px" DataField="Nombre" HeaderText="Order Id" /> 
             <asp:BoundField ItemStyle-Width="150px" DataField="Rut" HeaderText="Date" /> 
            </Columns> 
            </asp:GridView> 
            </asp:Panel> 
            </ItemTemplate> 
            </asp:TemplateField> 

            <asp:TemplateField HeaderText = "Nombre" > 
             <ItemTemplate> 
             <asp:Label ID="lblNombre" runat="server" Text='<%# Eval("Nombre")%>'></asp:Label> 
             </ItemTemplate>  
            </asp:TemplateField> 

            <asp:TemplateField HeaderText = "Rut"> 
             <ItemTemplate > 
             <asp:Label ID="lblRut" DataField="Rut" runat="server" Text='<%# Eval("Rut")%>'></asp:Label> 
             </ItemTemplate>  
            </asp:TemplateField> 

            <asp:TemplateField HeaderText = "Fecha de Nacimiento"> 
            <ItemTemplate> 
             <asp:Label ID="lblFecha_Nac" runat="server" Text='<%# Eval("Fecha_Nac")%>'></asp:Label> 
            </ItemTemplate> 
            <EditItemTemplate> 
             <div class='input-group date' id='datetimepicker1'> 
              <asp:TextBox ID="txtFecha_Nac" runat="server" Text='<%# Eval("Fecha_Nac")%>'></asp:TextBox> 
              <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>         
             </div> 
            </EditItemTemplate> 
            </asp:TemplateField> 


            <asp:TemplateField HeaderText = "Celular"> 
            <ItemTemplate> 
             <asp:Label ID="lblCelular" runat="server" Text='<%# Eval("Celular")%>'></asp:Label> 
            </ItemTemplate> 
            <EditItemTemplate> 
             <asp:DropDownList ID="txtCelular" runat="server" > 
              <asp:ListItem Text="SI" Value="1" /> 
              <asp:ListItem Text="NO" Value="0" /> 
             </asp:DropDownList> 
            </EditItemTemplate> 
            </asp:TemplateField> 

            <asp:CommandField EditText="Editar" ShowEditButton="True" /> 

            <asp:TemplateField HeaderText="Informacion Adicional" > 
             <ItemTemplate> 
             <asp:Button ID="Btn1" runat="server" 
              Text="Ver Mas" CommandArgument="Button1" 
              OnClick="Btn1_Click"/> 
             </ItemTemplate> 
             </asp:TemplateField> 

            <asp:TemplateField HeaderText="Cambio Final" > 
             <ItemTemplate> 
             <asp:Button ID="BtnCambio" runat="server" 
              Text="Check" CommandArgument="Button1" 
              OnClick="Btn1_ClickCambioFinal"/> 
             </ItemTemplate> 
             </asp:TemplateField> 

            <asp:TemplateField HeaderText="Image"> 
             <EditItemTemplate> 
              <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
             </EditItemTemplate> 
             <ItemTemplate> 
              <asp:Image ID="Image1" runat="server" /> 
             </ItemTemplate> 
            </asp:TemplateField> 
           </Columns> 

           <AlternatingRowStyle BackColor="#FBEDBB" /> 
           <HeaderStyle BackColor="#F18A07" /> 
          </asp:GridView> 

           </ContentTemplate> 
           <Triggers> 
            <asp:AsyncPostBackTrigger ControlID = "GridView1" /> 
           </Triggers> 
          </asp:UpdatePanel> 

Answer 1

這是什麼事件在文檔就緒必然的問題。

如果你想在兩個函數調用之間「切換」，有很多插件可以幫助你（see this SO question）。

實現它的簡單方法是使用Tushar Gupta提到的jquery one函數。

function plus() {    
    $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>"); 
    $(this).attr("src", "images/minus.png"); 
    $(this).one("click", minus); 
} 
function minus() { 
    $(this).attr("src", "images/plus.png"); 
    $(this).closest("tr").next().remove(); 
    $(this).one("click", plus); 
} 

$(document).ready(function(){ 
    $("[src*=plus]").one("click", plus);  
    //You might want to change the selector with a class 
    // to your img so you don't have to worry about 
    // opened or closed by default 
}); 

希望這有助於！

說明：

的on函數的事件綁定到DOM元素，當它被調用。就你而言，當文件準備就緒時。 加載文檔時，您的所有表格行都顯示展開圖像。因此，「加點擊」功能綁定到所有的img標籤。 另一方面，沒有元素顯示減號（尚）。所以沒有「減號點擊」功能。

on函數不關心你是否更改元素屬性。請記住，即使您通過屬性進行篩選，選擇器也會選擇元素。

在您提供的鏈接中，作者使用live函數。這個函數現在已經被棄用了，但它基本上是一個on函數，現在和將來都可以在選擇器上工作。 on函數不再是這種情況。

Answer 2

我會假設你需要重新訂閱事件。 JavaScript是自頂向下執行的，這意味着在訂閱了該事件後，稍後創建的元素將不會觸發該事件。

像下面的例子：

function myEventHandler() { 
    // In here you perform your event-specific code 
    eventSubscription(); 
} 

var eventSubscription = function() { 
    // Make sure to unsubscribe to prevent event to fire multiple times 
    $('.myClass').unbind('click'); 
    // Re-subscribe to event 
    $('.myClass').on('click', myEventHandler); 
} 

// Call the eventSubscription to hook your events 
eventSubscription(); 

Answer 3

正如noMad17說，你需要，重新訂閱您的js方法回發後，即使您正在使用一個UpdatePanel。這裏是我的代碼：

//js file: 
$(document).ready(function() { 
    loadConfiguration(); 
}); 

function loadConfiguration() 
{ 
    //add your configuration here 
}  
//aspx file 
<asp:UpdatePanel runat="server" ID="upnl1" UpdateMode="Conditional" > 
     <ContentTemplate> 
      <script type="text/javascript">           
       Sys.Application.add_load(loadConfiguration); 
      </script> 
     <!--More code here...--> 
</asp:UpdatePanel> 

回傳後，UpdatePanel的是建立和它裏面的所有內容一樣，所以它會再次加載內add_load的js代碼。

希望它可以幫助