Jquery 脚本在 ASP.NET UpdatePanel 中未按预期工作

Question

我正在创建一个嵌套的网格视图。我使用的示例来自：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 个网格视图）。

 <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 所说，即使您使用的是 updatePanel，您也需要在回发后重新订阅您的 js 方法。这是我的代码：

//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 代码。

希望对你有帮助