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

与预期不符。虽然代码可以运行，但它并没有像我想要的那样 do 。这里的想法是，给定一个options对象，某些列可能会附加事件侦听器，以执行知道谁的操作。我在此处引用的当前函数（self.options.eventListeners[inputIndex][eventIndex].listenerFunction(e)）是一个旨在仅允许字段中的某些字符而忽略其他所有内容的函数。因此，我使用“ keydown”事件来实现这一目标。

但是，可惜的是，在表成为该代码所附加的行和输入元素之后，keydown事件再也不会触发我用$(this).on(...)添加的功能。

let event = self.options.eventListeners[inputIndex][eventIndex].event;实际上只是一个字符串，该字符串取自像我所做的const这样的枚举。当前，它持有“更改”或“按键”。这样应该很好。

此设置我缺少什么？

事件侦听器不适用于使用jquery的动态html

0 个答案: