使用JQuery向GridView中的TextBox添加点击事件

Question

我正在尝试访问网格视图中的文本框并添加单击事件。我向网格视图之外的文本框添加了一个单击事件，使用 JQuery 没有任何问题。

`<asp:TextBox ID = "dcrTxtBoxAll"
        style="Z-INDEX: 120; LEFT: 783px; POSITION: absolute; TOP: 111px; width: 432px; height: 71px;" 
         runat="server" ClientIDMode="Static" Text='<%# Bind("Description") %>' Visible="false" TextMode="MultiLine" >
    </asp:TextBox>

    <script type="text/javascript" src="jquery-3.7.1.js"></script>

    <script type="text/javascript">
        // This function adds a click listener to the dcrTxrBoxAll textbox. When the textbox is clicked the update button and the GridView Rows textboxes are disabled
        $("#dcrTxtBoxAll").on('click', function()
        {
            $("#cmdUpdate").val('Update All'); // Changed the button text

            // Loop through the GridView and disable each text box
            $("#GridView1 tr").each(function ()
            {
                var $this = $(this);
                var $dcrTextBox = $("#dcrTextBox", $this); // Get the textbox at each row
                $dcrTextBox.prop("disabled", true); // Disable the textbox
            });

            $("*").unbind("click"); // Removes all click handlers added by javascript from every element
            $("[onclick]").removeAttr("onclick"); // Finds all elements with an 'onclick' attribute, and removes that attribute
        });
    </script>`

我尝试了类似的方法，但我无法让它工作。

这是 GridView：

`<asp:GridView ID="GridView1" style="Z-INDEX: 120; LEFT: 410px; POSITION: absolute; TOP: 244px; width: 698px; height: 251px;"
                                     runat="server" BackColor="DeepSkyBlue" AutoGenerateColumns="False"
                                     BorderStyle="Solid" BorderColor="Black" AllowSorting="True"
                                     PageSize="15" AllowMultiRowSelection="true" ShowHeaderWhenEmpty="true" GridLines="None">
                                        <RowStyle backcolor="White" />
                                        <SelectedRowStyle BackColor="Yellow" />
                                        <Columns>
                                            <asp:TemplateField>
                                                <HeaderTemplate > 
                                                    <asp:CheckBox ID="ChkHeader" runat="server" AutoPostBack="true" OnCheckedChanged="ChkHeader_CheckedChanged"/>
                                                </HeaderTemplate>
                                                <ItemTemplate>
                                                    <asp:CheckBox ID="ChkEmpty" runat="server" AutoPostBack="true" OnCheckedChanged="ChkEmpty_CheckedChanged"/>
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                            <asp:BoundField DataField="RequestorId" HeaderText="Requestor Id" ReadOnly="True">
                                            </asp:BoundField>
                                            <asp:BoundField DataField="FileName" HeaderText="File Name" ReadOnly="True">
                                            </asp:BoundField>
                                            <asp:BoundField DataField="FolderName" HeaderText="Sub Folder Name" 
                                                ReadOnly="True">
                                                <HeaderStyle HorizontalAlign="Center" Width="24px" VerticalAlign="Middle"></HeaderStyle>
                                                <ItemStyle HorizontalAlign="Center"></ItemStyle>
                                            </asp:BoundField>
                                            <asp:BoundField DataField="ModifiedDt" HeaderText="Uploaded Dt" 
                                                ReadOnly="True">
                                                <HeaderStyle HorizontalAlign="Center" Width="48px"></HeaderStyle>
                                                <ItemStyle HorizontalAlign="Center"></ItemStyle>
                                                <HeaderStyle HorizontalAlign="Center" Width="96px" />
                                                <ItemStyle HorizontalAlign="Left" />
                                            </asp:BoundField>
                                            <asp:TemplateField HeaderText="Description of Change/Reason" ItemStyle-Width="300px">
                                                <ItemTemplate >
                                                    <asp:Label ID="dcrLabel" runat="server" Text='<%# Bind("Description") %>'></asp:Label>
                                                    <asp:TextBox ID="dcrTextBox" runat="server" ClientIDMode="Static" Text='<%# Bind("Description") %>' Visible="false" TextMode="MultiLine"></asp:TextBox>
                                                </ItemTemplate>
                                            </asp:TemplateField>
                                        </Columns>
        </asp:GridView >`

这是我尝试访问 GridView 中的文本框的内容。我似乎无法让它注册点击。

`<script type="text/javascript"> 
            $('#dcrTextBox').on('click', function()
            {
                alert('Hello');
            });
        </script>`

Answer 1

嗯，该文本框 ID 是“dcrTextBox”。

但是，由于它在 GridView 中重复了很多次，那么上面引用的 TextBox 的哪一行和哪个实例呢？

请记住，HTML 标准不允许同一页面上的控件具有相同的 id。因此，如果您有 10 行，那么您将在标记中看到 10 行，并且该行上的每个控件都将拥有自己的自动生成的 ID。

但是，当人们将控件、文本框或几乎任何控件放入网页时？

为什么使用 jQuery 将某些事件连接到控件？我认为没有真正的理由这样做，现在你有更难以阅读的标记，因为你有一个按钮，或像文本框一样的控件，现在该页面标记中的其他地方，你必须知道，必须找到，必须寻找连接该事件的 jQuery。因此，对于按钮或文本框，大多数情况下最好将事件添加到控件中。

因此，当开发人员查看该控件时，您可以看到某个事件附加到该控件。 （并且不必去查看页面上的其他位置来了解/查看/发现某些 jQuery 代码现在决定将某些事件连接到该控件）。

现在 100% 清楚了，jQuery 能够在页面上附加和连接控件，并对许多控件执行此操作的想法是 jQuery 的一个非常奇妙的功能。但是，当不需要此功能时，只需使用给定控件的标记中定义的常规普通 Jane 事件即可。

一个额外的结果是，通过为给定文本框定义单击事件，我们可以自由地传递该文本框单击事件的其他参数。

所以，我们可以让标记像这样说：

<asp:TemplateField HeaderText="Description">
    <ItemTemplate>
        <asp:TextBox ID="txtDesc" runat="server"
            TextMode="MultiLine" 
            Text='<%# Eval("Description") %>'
                onclick='<%# $"myrowclick(this,{Eval("ID")},{Container.DataItemIndex});return false" %>'
            >
        </asp:TextBox>
    </ItemTemplate>
</asp:TemplateField>

因此，在上面我们传递了控件“this”，我们传递了数据库行 PK id，我们传递了行索引。

上面的标记是 GridView 的一部分，如下所示：

<asp:GridView ID="GVHotels" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ID" CssClass="table table-hover" 
    Width="55%"
    >
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
        <asp:BoundField DataField="LastName" HeaderText="LastName" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="HotelName" HeaderText="Hotel" />
            <asp:TemplateField HeaderText="Description">
                <ItemTemplate>
                    <asp:TextBox ID="txtDesc" runat="server"
                        TextMode="MultiLine" 
                        Text='<%# Eval("Description") %>'
                            onclick='<%# $"myrowclick(this,{Eval("ID")},{Container.DataItemIndex});return false" %>'
                        >
                    </asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
        <asp:TemplateField HeaderText="Bookings">
            <ItemTemplate>
                <asp:Button ID="cmdView" runat="server" Text="Bookings" 
                    class="btn myshadow"
                    OnClientClick="return callme(this)"
                    OnClick="cmdView_Click" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

要加载的代码：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid
    End If

End Sub

Sub LoadGrid()

    GVHotels.DataSource = MyRst("SELECT * FROM tblHotelsA
                                WHERE ID IN (select Hotel_id FROM BOOKINGS)
                                ORDER BY HotelName")
    GVHotels.DataBind()

End Sub

我们现在得到了这个结果：

因此，既然 GridView 控件为您“重复”该文本框，那么不妨在标记中简单地添加一键单击事件。如上所示，这具有传递数据库 PK ID、行索引等值的额外优势，当然还可以使用“this”作为传递的控制。