单击按钮后，GridView 上的类属性不起作用

Posted 2023-04-12

【中文标题】单击按钮后，GridView 上的类属性不起作用

【英文标题】：Class attribute on GridView doesn't work after button click

【发布时间】：2018-02-10 17:35:30

【问题描述】：

我有一个 GridView，您可以在其中编辑行上的信息。因此，您可以单击该行，这会弹出一个可以更改某些内容的框，然后单击“保存”。 但是在我单击保存按钮并尝试单击另一行后，弹出框不再显示。我必须完全关闭表单，然后返回并单击一行。如果我不点击保存按钮，它工作正常。我单击一行，关闭弹出框并单击另一行。问题仅在单击保存按钮后。

网格视图：

<asp:UpdatePanel ID="updOBSAddress" UpdateMode="Conditional" runat="server" >
                               <ContentTemplate>
                                <asp:GridView runat="server" GridLines="None" ID="GVAddresses"  OnRowDataBound="GVAddresses_RowDataBound"  AutoGenerateColumns="false" CssClass="tblStatus" AllowSorting="false" >                    
                                    <Columns>
                                        <asp:TemplateField HeaderText="Code">
                                            <ItemTemplate><%# Eval("AccountCode") %></ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Name">
                                            <ItemTemplate><%# Eval("Name") %></ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="btnUpdateOBSAddress" />
                    </Triggers>
                </asp:UpdatePanel> 

代码背后：

protected void GVAddresses_RowDataBound(object sender, GridViewRowEventArgs e)

    if (e.Row.RowType == DataControlRowType.DataRow)
    
        GridView gv = sender as GridView;
        DataRowView drv = e.Row.DataItem as DataRowView;
        //e.Row.Cells[0].Attributes.Add("onclick", "event.stopPropagation();");

        if (drv != null)
        
            e.Row.Attributes.Add("class", "GVAddressesRow");
            e.Row.Attributes.Add("ID", "GVAddressesRow_" + drv["ID"].ToString());
            e.Row.ToolTip = "Click here to Edit Address";
        
    

按钮：

protected void btnUpdateOBSAddress_Click(object sender, EventArgs e)
    

    

在 javascript 中，当单击该类时，它应该显示弹出窗口，但在我单击按钮后不再调用它：

 $(".GVAddressesRow").click(function (e)   
            ShowAddOBSAddress(this, e.pageX, e.pageY, "Edit");
            EditOBSAddress($(this).attr("ID")); 
        );

【问题讨论】：

点击保存按钮时做什么？

【参考方案1】：

问题是UpdatePanel。它使用 Ajax 刷新 GridView，尽管用户没有看到 Postback，但 DOM 仍在更改，并且之前使用 $(".GVAddressesRow").click 进行的绑定丢失了。这就是为什么您必须在 UpdatePanel 刷新后再次执行它。

您可以为此使用PageRequestManager。

<script type="text/javascript">
    $(document).ready(function () 
        bindPopup();
    );

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () 
        bindPopup();
    );

    function bindPopup() 
        $(".GVAddressesRow").click(function (e) 
            ShowAddOBSAddress(this, e.pageX, e.pageY, "Edit");
            EditOBSAddress($(this).attr("ID"));
        );
    
</script>

【参考方案2】：

这是第一次工作，因为您已经向 gridview 的所有行添加了一个单击处理程序，如下所示：$(".GVAddressesRow").click。但是当您单击保存按钮时，服务器会返回新的 html（行）。您没有向这些新行添加处理程序，因此它们将不起作用。

要解决此问题，您可以使用 jquery on 而不是 click。 Jquery on 将适用于动态创建的 html 元素。请参阅this answer 了解更多信息。

// Bind to all items with class GVAddressesRow inside
// #whatever element, even new ones created later.
$('#whatever').on('click', '.GVAddressesRow', function() 
     /* your code here */
);