添加監聽器到類或元素

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

如果您正在使用jQuery 1.7+您可以使用.on。這將會照顧未來的元素。

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

版本1.4之前使用.delegate。語法相似。

這是完整的文檔。 http://api.jquery.com/delegate/

基於更新的問題更新答案...

我看到幾個問題

1. 你已經把問題的HTML是不實際的HTML。它在ASP.Net Webform頁面，ASP.Net生成更多的HTML更好地從瀏覽器中獲取。
2. 要獲得實際的HTML轉到瀏覽器（chrome），請使用F12並查看元素下的HTML。
3. ListingInfo表開始標記未正確形成。 「」（引號）缺少ID值
   因爲你的jQuery的事件處理程序輸入ListingInfo將不會被解僱。

更新2：

由於文本是下Asp.Net Repeater的ID將保持也在改變文本框的數目將動態地改變依賴於源的ItemTemplate。

因此，其他方法是：爲ID爲「 - txtCode」的TextBox添加一個值爲'inputText'的class屬性。所以所有的文本框都會在呈現的HTML中擁有這個類。

使用這個類的delegate jQuery選擇掛鉤事件..

​​

例如，在這個JS小提琴 - http://jsfiddle.net/a88uv/

Answer 2

試試這個

$('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 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);  
});