слушатель событий не работает с Dynami c html с использованием jquery

Question

В настоящее время я работаю над редактором таблиц в Javascript, и в моем коде у меня есть следующая настройка, которая пытается добавить прослушиватель после того, как HTML был сгенерирован и добавлен в таблицу (одна строка):

$(self.tableName + ' tbody').append(htmlString);
$(self.tableName + ' tbody tr').each(function (outerIndex) {
    let id = $(this).find('td')[0].innerText;
    if (id === elements[0]) {
        $(this).find(':input').each(function (inputIndex) {
            $(this).change(function (e) {
                self.OnFieldValueChanged(objectCollection, elements[0], (inputIndex + 1), $(this).val());
            });
            if (self.options !== undefined) {
                if (self.options.eventListeners !== undefined && self.options.eventListeners[inputIndex] !== undefined) {
                    let eventListenerArrLength = self.options.eventListeners[inputIndex].length;
                    for (let eventIndex = 0; eventIndex < eventListenerArrLength; eventIndex++) {
                        let event = self.options.eventListeners[inputIndex][eventIndex].event;
                        $(this).on(event, (e) => { self.options.eventListeners[inputIndex][eventIndex].listenerFunction(e) });
                    }
                }
            }
        });
    }
});

Теперь странная вещь, эта строка здесь

$(this).change(function (e) {
    self.OnFieldValueChanged(objectCollection, elements[0], (inputIndex + 1), $(this).val());
});

На самом деле работает как задумано. Когда значение изменяется в таблице, это гарантирует, что мое объектное представление таблицы обновляется соответствующим образом. Тем не менее, этот кусок кода:

if (self.options !== undefined) {
    if (self.options.eventListeners !== undefined && self.options.eventListeners[inputIndex] !== undefined) {
        let eventListenerArrLength = self.options.eventListeners[inputIndex].length;
        for (let eventIndex = 0; eventIndex < eventListenerArrLength; eventIndex++) {
            let event = self.options.eventListeners[inputIndex][eventIndex].event;
            $(this).on(event, (e) => { self.options.eventListeners[inputIndex][eventIndex].listenerFunction(e) });
        }
    }
}

не работает, как предполагалось. Хотя код запускает , он не делает , как я хочу. Идея заключается в том, что с заданным объектом параметров к определенным столбцам могут быть подключены прослушиватели событий, которые делают, кто что знает. Моя текущая функция, на которую я ссылаюсь здесь (self.options.eventListeners[inputIndex][eventIndex].listenerFunction(e)) - это функция, предназначенная для разрешения только определенных символов в поле и игнорирования всего остального. Поэтому я использую событие «keydown» для достижения этой цели.

Но, увы, после того, как таблица создала элементы строки и ввода, к которым присоединен этот код, событие keydown никогда не вызывает функцию, которую я добавил с помощью $(this).on(...).

let event = self.options.eventListeners[inputIndex][eventIndex].event; - буквально просто строка, взятая из перечисления, как const, который я сделал. В настоящее время он содержит либо «изменение», либо «нажатие клавиши». Так что это должно быть хорошо.

Что мне не хватает в этой настройке?