在GridView中使用JQuery为TextBox添加Click事件

3pvhb19x 于 2023-10-17 发布在 jQuery

关注(0)|答案(1)|浏览(141)

我正在尝试访问Gridview中的文本框并添加单击事件。我在Gridview之外的文本框中添加了一个click事件，使用jQuery没有问题。

<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>

JavaScript

<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"
              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>

这是我试图访问GridView中的文本框。我好像没办法让它记录点击声。

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

jquery

来源：https://stackoverflow.com/questions/77175633/add-click-event-to-textbox-in-gridview-using-jquery

1条答案

按热度按时间

cs7cruho1#

这个文本框的ID是“dcrTextBox”。
但是，由于它在GridView中重复了很多次，那么上面的内容将引用TextBox的哪一行和哪一个示例？
请记住，HTML标准是不允许控件在同一页面上具有相同的ID。因此，如果您有10行，那么您将在标记中看到10行，并且该行上的每个控件都有自己的自动生成的ID。
然而，当一个控件，一个文本框，或只是任何控件到网页？
为什么要使用jQuery将一些事件连接到控件？我看不出有真实的理由这样做，现在你有更难阅读的标记，因为你有一个按钮，或者像文本框一样的控件，现在在那个页面的标记中有一些其他的地方，你必须知道，必须找到，必须寻找连接那个事件的jQuery。因此，对于按钮或文本框，在大多数情况下，最好将事件添加到控件中。
因此，当开发人员查看该控件时，您可以看到某个事件附加到该控件。因此，你不必去页面上的其他地方去知道/看到/发现一些jQuery代码现在决定将一些事件连接到该控件。这增加了开发人员的上下文和脑力工作量，并使调试此类页面变得相当困难。
你要说清楚吗？jQuery能够在页面上附加和连接控件事件，并对许多控件这样做，这是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”作为传递的控件。

赞(0）回复(0）举报 2023-10-17

我来回答

在GridView中使用JQuery为TextBox添加Click事件

1条答案

相关问题

热门标签

最新问答