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 - 事件，您都会调用updateTemplate(data)，而这又会导致此行：

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

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

请参阅your updated fiddle其中i - 仅作为示例 - 删除了updateTemplate()功能。您会注意到，事件处理程序会根据需要多次触发。

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

JS事件函数只被触发一次

1 个答案: