Обнаружение изменений в поле ввода во вложенной ячейке dataTable с помощью Jquery / JS

Question

У меня есть дочерняя таблица данных, вложенная в таблицу данных.Ячейки в дочерней таблице имеют поля ввода типа ввода, я хочу обнаружить изменения в поле и получить новое значение.Однако я не могу перехватить событие изменения.

Поле ввода имеет класс, подобный следующему:

<td><input type='number' class='edit_detect' name='input_field' value=1</td>

Я обнаруживаю изменения в поле, используя следующий класс:

$(".edit_detect").on('change keyup input', function(event){
    console.log(event);
})

Но функция никогда не запускается, т. Е. Событие никогда не регистрируется.

Что я делаю неправильно?

Answer 1

Чтобы быть точным при выборе, используйте уникальный идентификатор, используя атрибут id во входных данных.

<td><input type='number' class='edit_detect' id='input-field' name='input_field' value=1</td>

Используя идентификатор:

$("#input_field").change(function(event){
    alert($(this).val());
})

Или используя имя атрибута:

$("input[name=input_field]").change(function(event){
        alert($(this).val());
    })

Answer 2

Когда вы добавляете элемент динамически, вам нужно привязать событие следующим образом:

$('body').on('change keyup input', '.edit_detect', function(event){
    console.log(event);
});

Таким образом, вы привязали событие с именем direct event.есть также нечто, называемое delegate event, которое не связывает событие с элементами DOM, но делегирует событие от их родителя.ответственность за выполнение события на соответствующих дочерних элементах лежит на родителе.если новый родитель добавлен к родителю, родитель позаботится о выполнении события для него.

Я использовал body в качестве родителя здесь, но лучше связать событие с первым нединамическим родителем.