Add listener to class or element

Question

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);
});

UPDATED:

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>

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

Any help would be appreciated.

Pranav C Balan · Answer 1 · 2014-01-07T14:29:47.687

2

Try this

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

or try if the textarea are creating dynamically

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

if table is also creating dynamically then try

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

If multiple tables are there then provide id and try .......

edited Jan 07 '14 at 14:29

answered Jan 07 '14 at 14:22

Pranav C Balan

113,687
23
165
188

But this only will work at declared time, correct?... The post is indicateing that new rows will added. – Dalorzo Jan 07 '14 at 14:25
first of all change `$("ListingInfo")` to `$("#ListingInfo")` also change `id="ListingInfo` to `id="ListingInfo"` – Pranav C Balan Jan 08 '14 at 08:40
@PranavRam sorry I did not notice it. is there a way that I can add listener to the 1 column ID="txtCode"? If i inspect the element it will look as follows: ClaimCapture_LineItems_ctl01_txtCode – Gericke Jan 08 '14 at 09:47

SridharVenkat · Accepted Answer · 2014-01-08T11:04:10.657

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" );
});

prior to version 1.4 use .delegate. The syntax is similar.

Here is complete documentation. http://api.jquery.com/delegate/

Updated answer based on updated question...

I see couple of problems

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.
ListingInfo table start tag is not formed properly. ""(quotes) is missing after id's value
because of which your jquery event handler for input under ListingInfo will not be fired.

Update 2:

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.

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.

Use this class in Jquery selector of delegate to hook up events..

$("#ListingInfo" ).delegate("input.inputText","blur", function() {
.... //do your logic
});

example in this JS fiddle - http://jsfiddle.net/a88uv/

Thanks I fixed the quotations. I did inspect the element and need to add listener to id="txtCode", this is the id that I get when I inspect element ClaimCapture_LineItems_ctl01_txtCode — Gericke, Jan 08 '14 at 10:19

score 0 · Answer 3 · answered Jan 07 '14 at 14:26

0

You need .on() to cater to additional rows with inputs that will be added after the fact.

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

answered Jan 07 '14 at 14:26

kei

20,157
2
35
62

score 0 · Answer 4 · answered Jan 07 '14 at 14:26

0

Give a common class name to your inputs (e.g. say "yourInput") and attach the listener to all of them in one move as follows:

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

answered Jan 07 '14 at 14:26

ovunccetin

8,443
5
42
53

score 0 · Answer 5 · answered Jan 07 '14 at 14:27

0

Using .on() you can define you function once, and it will execute for any dynamically added elements.

Try this :

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

answered Jan 07 '14 at 14:27

Ishan Jain

8,063
9
48
75

Add listener to class or element

5 Answers5

Linked