"keydown" and "change" events not working for jquery datatables

Question

I have an input field in each row of my jquery datatable. I have to trigger an event on text change and enter press for each of these input fields.Am loading jquery datatable using serverside processing.Before without using the server side processing the input field events were working fine!.What causes the event to be silent now?

Events i used before ---

$('#txtQty').keydown(function (e) {
        alert("keydown");
}

$('#txtQty').change(function () {
         alert("Change");

}

same listeners i use after the serverside processing applied.

Jquery grid details- client side processing and adding input box~

@foreach (var item in Model)
{
 <tr>
                    .
.
.
.
.
.
@if (item.Qty <= 0)
{
 <td>
     <input class="inputs" id="txtQty" type="text" [email protected] />
     </td>
    }
  }

Serverside processing and input box applied on the go-

$('#grid').dataTable({
        "bServerSide": true,
        "sAjaxSource": "../myaction/AjaxHandler",
        "bProcessing": true,
        "scrollY": 385,
        "scrollX": true,
        "scrollCollapse": true,
        "jQueryUI": true,
        "bJQueryUI": true,
        "sDom": 'lfrtip',

        "aoColumns": [
                        { "sName": "dfgdfg" },
                        { "sName": "dfgdfg" },
                        { "sName": "hhh" },
                        {
                            "sName": "Qty",

                            "mRender": function (sName) {

                                return '<input class="inputs" id="txtQty" type="text"  value='+ sName +' />';
                            },
                        },
                        { "sName": "Category" },
                        { "sName": "Comment" }
        ],
        "oLanguage": {

            "sProcessing":'Processing.....'
        }

    });

You have multiple elements with same ID txtQty, don't you? If so, replace $('#txtQty').keydown with, for example, $('.inputs').keydown — Regent
– Regent, Commented Sep 4, 2014 at 10:03
Due to dynamically created elements use $(document).on('keydown', '.inputs', function(e) instead. — Regent
– Regent, Commented Sep 4, 2014 at 10:22
@Regent please add above comment as answer let me say that's the correct answer. — Murali Uppangala
– Murali Uppangala, Commented Sep 4, 2014 at 10:27

Regent · Accepted Answer · 2014-09-04 10:30:04Z

1

you have multiple elements with same id txtQty. For correct event handling of multiple elements you can use class. For example, class inputs.
for dynamically created elements you can use $(document).on("event", "selector", function() {});.

So, finally, it should look like:

$(document).on('keydown', '.inputs', function(e) {
    alert("keydown");
}

$(document).on('change', '.inputs', function() {
    alert("Change");
}

answered Sep 4, 2014 at 10:30

Regent

5,1743 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maximilien · Accepted Answer · 2014-09-04 10:03:45Z

1

I suppose there are more than one "txtQty" per page so instead of an id, use a class

 <input class="inputs txtQty" type="text" [email protected] />

$('.txtQty').keydown(function (e) {
    alert("keydown");
}

$('.txtQty').change(function () {
     alert("Change");
}

answered Sep 4, 2014 at 10:03

Maximilien

2212 silver badges10 bronze badges

2 Comments

Murali Uppangala Over a year ago

no id required? why two classes? class="inputs txtQty"

Murali Uppangala Over a year ago

this works on client side processing only for datatble in this case!!

Collectives™ on Stack Overflow

"keydown" and "change" events not working for jquery datatables

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related