события keydown и change не работают для таблиц данных jquery

У меня есть поле ввода в каждой строке моей таблицы данных jquery. Я должен вызвать событие при изменении текста и ввести нажатие для каждого из этих полей ввода. Я загружаю jquery datatable с помощью обработки на стороне сервера. Прежде чем без использования обработки на стороне сервера события поля ввода работали нормально! Что заставляет событие молчать в настоящее время?

События, которые я использовал раньше ---

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

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

}

те же слушатели, которые я использую после обработки на стороне сервера.

Детали сетки Jquery - обработка на стороне клиента и добавление поля ввода ~

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

Обработка на стороне сервера и поле ввода применяются на ходу.

$('#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.....'
        }

    });

javascript jquery onchange keydown jquery-datatables
person Murali Uppangala    schedule 04.09.2014    source источник
comment
У вас есть несколько элементов с одинаковым идентификатором txtQty, не так ли? Если да, замените $('#txtQty').keydown, например, $('.inputs').keydown   -  person Regent    schedule 04.09.2014
comment
@Regent пробовал, не получилось!!   -  person Murali Uppangala    schedule 04.09.2014
comment
Из-за динамически создаваемых элементов вместо этого используйте $(document).on('keydown', '.inputs', function(e).   -  person Regent    schedule 04.09.2014
comment
@Regent, пожалуйста, добавьте комментарий выше в качестве ответа, позвольте мне сказать, что это правильный ответ.   -  person Murali Uppangala    schedule 04.09.2014

Ответы (2)


arrow_upward
1
arrow_downward

  • у вас есть несколько элементов с одинаковым идентификатором txtQty. Для правильной обработки событий нескольких элементов вы можете использовать class. Например, класс inputs.

  • для динамически создаваемых элементов вы можете использовать $(document).on("event", "selector", function() {});.

Итак, в итоге должно получиться так:

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

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

arrow_upward
1
arrow_downward

Я полагаю, что на странице более одного «txtQty», поэтому вместо идентификатора используйте класс

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



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

$('.txtQty').change(function () {
     alert("Change");
}
person Maximilien    schedule 04.09.2014
comment
удостоверение личности не требуется? почему два класса? класс = ввод txtQty - person Murali Uppangala; 04.09.2014
comment
в этом случае это работает на стороне клиента только для таблицы данных!! - person Murali Uppangala; 04.09.2014