如何使用jQuery为GridView中的TextBox添加点击事件

我能正常给GridView外的TextBox添加jQuery点击事件，但GridView内的TextBox用同样方法绑定点击事件却完全没反应，相关代码如下：

1. GridView外的TextBox代码 #

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

2. 生效的jQuery代码（GridView外文本框） #

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

<script type="text/javascript">
    // 该函数为dcrTxtBoxAll文本框添加点击监听器，点击后更新按钮及GridView行内文本框将被禁用
    $("#dcrTxtBoxAll").on('click', function()
    {
        $("#cmdUpdate").val('Update All'); // 修改按钮文本

        // 遍历GridView并禁用每个文本框
        $("#GridView1 tr").each(function ()
        {
            var $this = $(this);
            var $dcrTextBox = $("#dcrTextBox", $this); // 获取每行的文本框
            $dcrTextBox.prop("disabled", true); // 禁用文本框
        });

        $("*").unbind("click"); // 移除所有元素通过JavaScript添加的点击处理器
        $("[onclick]").removeAttr("onclick"); // 移除所有带有onclick属性的元素的该属性
    });
</script>

3. GridView控件代码 #

<asp:GridView ID="GridView1"
              runat="server"
              style="Z-INDEX: 120; LEFT: 410px; POSITION: absolute; TOP: 244px; width: 698px; height: 251px;"
              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>

4. 失效的GridView内TextBox绑定代码 #

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

问题原因 #

1. 重复ID冲突：给GridView内的TextBox设置ClientIDMode="Static"后，每行都会生成一个ID为dcrTextBox的元素，页面出现重复ID，jQuery通过#dcrTextBox只能选中第一个匹配元素，其他行的无法绑定事件。
2. 元素初始不可见：TextBox默认Visible="false"，初始渲染时不在DOM中，直接绑定事件会失效。
3. 动态元素适配问题：如果GridView存在分页、异步刷新等动态加载场景，绑定代码执行时目标元素可能还未生成。

解决方法 #

使用事件委托，通过父容器代理子元素的事件，同时避免ID重复问题：

步骤1：修改GridView内的TextBox代码

移除ClientIDMode="Static"，添加class标识文本框：

<asp:TextBox ID="dcrTextBox"
             runat="server"
             CssClass="dcr-textbox"
             Text='<%# Bind("Description") %>'
             Visible="false"
             TextMode="MultiLine"></asp:TextBox>

步骤2：用事件委托绑定点击事件

将事件绑定到GridView父容器，监听子元素的点击：

<script type="text/javascript">
    // 事件委托：父容器GridView1代理所有子元素.dcr-textbox的点击事件
    $("#GridView1").on("click", ".dcr-textbox", function() {
        alert("GridView内的TextBox被点击了");
        // 可扩展业务逻辑，比如获取当前行数据
        var currentRow = $(this).closest("tr");
        console.log("当前行信息：", currentRow);
    });
</script>

额外注意点

• 事件委托天然支持动态生成的元素，无需担心GridView分页、刷新后事件失效。
• 建议用off替代已废弃的unbind方法来移除事件。

内容的提问来源于stack exchange，提问作者Demetrius Rhodes