将侦听器添加到类或元素 [英] Add listener to class or element
问题描述
我有一张桌子，想向它添加一个侦听器，以检测输入框是否失去焦点.目前，我对每个输入框使用 .blur 函数，但将来可能会添加更多行，并希望满足这一要求.
I have a table and want to add a listener to it to detect if input boxes loses focus. Currently I using .blur function for each input box but in future more rows could be added and want to cater for that.
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上
Using jquery 1.6.2 and this still does not solve my issue. I want to put the listener on the texboxes that is in the ItemTemplate
任何帮助将不胜感激.
推荐答案
如果您使用的是jQuery 1.7+，则可以使用.on.这样甚至可以照顾到将来的元素.
If you are using jquery 1.7+ you can user .on. This will take care even future elements.
$( "table" ).on( "blur", "input.textClass", function() {
$( this ).toggleClass( "chosen" );
});
版本1.4之前的版本，请使用.delegate.语法类似.
prior to version 1.4 use .delegate. The syntax is similar.
这里是完整的文档. http://api.jquery.com/delegate/
Here is complete documentation. http://api.jquery.com/delegate/
根据更新的问题更新了答案...
我看到了几个问题
- 您在问题中输入的html不是实际的HTML.它是ASP.Net Webform页面，ASP.Net可以更好地生成更多HTML，以便从浏览器获取.
- 要获取实际的HTML，请使用F12进入浏览器(chrome)，然后在Elements下查看HTML.
-
ListingInfo表开始标记格式不正确. id的值后缺少"(引号)
因此，不会触发您在ListingInfo下输入的jquery事件处理程序.
- The html you have put in the question is not the actual HTML. It ASP.Net Webform page, ASP.Net generates more HTML better to get from browser.
- To get the actual HTML go to the browser(chrome) use F12 and see the HTML under Elements.
ListingInfotable start tag is not formed properly. ""(quotes) is missing after id's value
because of which your jquery event handler for input underListingInfowill not be fired.
更新2:
由于文本框位于Asp.Net Repeater的ItemTemplate下，因此ID会不断变化，文本框的数量也会根据来源动态变化.
Since the textbox is under the ItemTemplate of a Asp.Net Repeater the id will keep changing also number of textboxes will vary dynamically depending on source.
所以另一种方法是..为ID为"txtCode"的文本框添加值为'inputText'的class属性.因此，所有文本框都将在呈现的HTML中具有此类.
So other way is.. add a class attribute with value 'inputText' for the TextBox with id - "txtCode". So all textboxes will have this class in rendered HTML.
在delegate的Jquery选择器中使用此类来挂接事件.
Use this class in Jquery selector of delegate to hook up events..
$("#ListingInfo" ).delegate("input.inputText","blur", function() {
.... //do your logic
});
此JS小提琴中的示例- http://jsfiddle.net/a88uv/
example in this JS fiddle - http://jsfiddle.net/a88uv/
这篇关于将侦听器添加到类或元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
