JS事件函数仅触发一次

Question

我正在尝试为Handlebars模板创建一个简单的表单验证器。 因此，我对模糊使用addEventListener来验证输入，但是该事件仅被触发一次。 我这样做对吗？ 还是有更好的方法/推荐好的做法？

这是JSFiddle： http : //jsfiddle.net/jj4fsn9j/

function addInputValidation(el, event) {
    el.addEventListener(event, function() {
        var data = {
            invalid: {}
        };
        data.invalid[el.id] = false;
        data[el.id] = el.value;

        console.log(el.value);
        if (typeof el.value === 'undefined' || el.value === '') {
            data.invalid[el.id] = true;
        }

        console.log(data);
        updateTemplate(data);
    });

有人可以帮我弄这个吗 ？

Answer 1

对于每个onblur -event，您正在调用updateTemplate(data) ，而这又导致此行：

document.getElementById('body').innerHTML = html;

这意味着每次触发该事件时，您都会用新内容覆盖整个文档。 因此，所有事件处理程序都将丢失。

请参阅更新后的小提琴 ，其中我（例如updateTemplate()删除了updateTemplate()函数。 您会注意到，事件处理程序在此处相应地触发了所需的次数。

无论如何，每次触发事件都会覆盖整个文档，这不是一个好习惯。 要么只覆盖需要覆盖的部分，要么-如果需要坚持覆盖整个文档-请确保在更改正文的innerHTML之后再次运行addInputValidations() 。 同样，我想强调一点，那就是一遍又一遍地覆盖身体的内容是不好的做法。