Question

我有一个表，想要添加一个监听器来检测输入框是否失去焦点。目前我为每个输入框使用 .blur 功能，但将来可能会添加更多行并希望能够满足这一要求。

JQUERY：

$('#ClaimCapture_LineItems_ctl01_txtCode').blur(function () {
    var tariffCode = $('#ClaimCapture_LineItems_ctl01_txtCode').val();

    DisbaleControls(tariffCode);
});

更新：

JQUERY：

$("#ListingInfo").delegate("input", "blur", function () {
    var tariffCode =  $(this).val();
    DisbaleControls(tariffCode); 
});

HTML：

<TABLE class="Listing" id="ListingInfo" cellSpacing="0" cellPadding="0">
    <TR>
        <TD id="tdRdd" colSpan="10"><B>
             <asp:Literal id="lblRDDQuestion" runat="server"></asp:Literal></B></TD>
    </TR>
    <TR>
        <TD id="tdCat" colSpan="10"><B>
             <asp:Literal id="lblCatQuestion" runat="server"></asp:Literal></B></TD>
    </TR>
    <TR>
        <TD colSpan="10"><STRONG>Please enter in your line items:</STRONG>
        </TD>
    </TR>
             <asp:Repeater id="LineItems" Runat="server">
                 <HeaderTemplate>
                     <tr class="Header">
                         <td width="28">#</td>
                         <td width="30">Qty</td>
                         <td width="60">Tariff</td>
                         <td width="170" align="left">Description</td>
                         <td width="78">ICD Codes</td>
                         <td width="68" align="right">Invoice</td>
                         <td width="68" align="right">Medical</td>
                         <td width="68" align="right">Patient</td>
                         <td width="68" align="right">Discount</td>
                         <td width="50">Rej #</td>
                     </tr>
                 </HeaderTemplate>
             <ItemTemplate>
                        <tr class="Normal">
                            <td><%# DataBinder.Eval(Container.DataItem, "Number") %></td>
                            <td>
                                <asp:TextBox ID="txtQuantity" Runat="server" Width="13px" MaxLength="2" onChange="jsCheckQuantities(this)" Text='<%# DataBinder.Eval(Container.DataItem, "Quantity") %>' /></td>
                            <td>
                                <asp:TextBox ID="txtCode" Runat="server" Width="40px" MaxLength="8" onChange="jsCheckCodes(this,ClaimCapture_txtTariffs,ClaimCapture_txtLaboratory,ClaimCapture_txtNVSTag);" Text='<%# DataBinder.Eval(Container.DataItem, "Code") %>' /></td>
                            <td>
                                <asp:TextBox ID="txtDescription" Runat="server" Width="162px" MaxLength="64" Text='<%# DataBinder.Eval(Container.DataItem, "Description") %>' /></td>
                            <td>
                                <asp:TextBox ID="txtDiagnosticCodes" Runat="server" Width="72px" MaxLength="64" Text='<%# DataBinder.Eval(Container.DataItem, "DiagnosticCodes") %>' /></td>
                            <td>
                                <asp:TextBox ID="txtInvoice" Runat="server" Width="49px" MaxLength="10" CssClass="Amount" onChange="jsFormatAmount(this);" onKeyPress1="return(jsAmountSizeCheck(this, 8));" Text='<%# CurrencySymbol & FormatNumber(DataBinder.Eval(Container.DataItem, "Invoice"), 2) %>' /></td>
                            <td align="right"><script>getCurrency()</script><%# FormatNumber(DataBinder.Eval(Container.DataItem, "Medical"), 2) %></td>
                            <td align="right"><script>getCurrency()</script><%# FormatNumber(DataBinder.Eval(Container.DataItem, "Patient"), 2) %></td>
                            <td>
                                <asp:TextBox ID="txtDiscount" Runat="server" Width="49px" MaxLength="10" CssClass="Amount" onChange="jsFormatAmount(this);" Text='<%# CurrencySymbol &  FormatNumber(DataBinder.Eval(Container.DataItem, "Discount"), 2) %>'/></td>
                            <td><%# FormatNull(DataBinder.Eval(Container.DataItem, "RejectionCodes")) %></td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
     <TR class="Footer">
        <TD align="left" colSpan="5">
            <asp:LinkButton id="CreateLineItem" Runat="server" Text="Create New Line Item" CommandName="Create"></asp:LinkButton></TD>
        <TD align="left">
            <INPUT id="txtInvoiceTotal" size="7" value="0.00" name="txtInvoiceTotal">
        </TD>
        <TD align="right" colSpan="3">NVS Tag</TD>
        <TD>
            <asp:TextBox id="txtNVSTag" Runat="server" MaxLength="36" Width="40px" Enabled="False"></asp:TextBox>
        </TD>
    </TR>
</TABLE>

使用jquery 1.6.2，这仍然无法解决我的问题。我想把监听器放在ItemTemplate

中的texbox上

任何帮助都将不胜感激。

Answer 1

试试这个

$('table input').blur(function () {
    var tariffCode = $(this).val();    
    DisbaleControls(tariffCode);
});

或尝试textarea动态创建

$('table').on('focusout','input',function () {
    var tariffCode = $(this).val();    
    DisbaleControls(tariffCode);
});

如果table也在动态创建，请尝试

$(document).on('focusout','table input',function () {
    var tariffCode = $(this).val();    
    DisbaleControls(tariffCode);
});

如果有多个表，则提供id并尝试.......

Answer 2

如果您使用的是jquery 1.7+，则可以使用.on。这将照顾未来的元素。

$( "table" ).on( "blur", "input.textClass", function() {
  $( this ).toggleClass( "chosen" );
});

1.4之前的

使用.delegate。语法类似。

这是完整的文档。 http://api.jquery.com/delegate/

根据更新后的问题更新了答案...

我看到了几个问题

您在问题中添加的HTML不是实际的HTML。它在ASP.Net Webform页面，ASP.Net生成更多的HTML来从浏览器中获取。
要获取实际的HTML转到浏览器（chrome），请使用F12并查看Elements下的HTML。
ListingInfo 表格开始标记格式不正确。在id的值
后，“”（引号）丢失因此，ListingInfo下的输入的jquery事件处理程序不会被触发。

更新2：

由于文本框位于Asp.Net ItemTemplate的{{1}}下，因此ID也会不断变化，文本框的数量也会根据来源动态变化。

所以其他方式是..为TextBox添加一个Repeater属性，其值为“class”，ID为“inputText”。因此，所有文本框都将以渲染的HTML格式显示此类。

在txtCode的Jquery选择器中使用此类来挂接事件..

delegate

这个JS小提琴的例子 - http://jsfiddle.net/a88uv/

Answer 3

您需要.on()来满足其他行的输入，这些行将在事后添加。

$("#your-table").on("blur", "input", function() {
  //code
});

Answer 4

为您的输入提供一个公共类名称（例如说“yourInput”），并按一般步骤将侦听器附加到所有这些名称，如下所示：

$('#yourTableId .yourInput').blur(function (e) {
   var tariffCode = $(e.target).val();
   DisableControls(tariffCode); 
});

Answer 5

使用.on()，您可以定义一次函数，它将针对任何动态添加的元素执行。

试试这个：

$(document).on('blur', 'table input', function() {
   var tariffCode = $(this).val();    
    DisbaleControls(tariffCode);      
});

将侦听器添加到类或元素

5 个答案: