Question

我的配置（作为示例）设置如下：

this.config = [
    {
        element: '#Amount',
        type: "money",
        notNull: true,
        error: "You must specify an amount"
    },
    {
        element: '#Type',
        type: "string",
        notNull: true,
        error: "You must specify whether you want a 6 week loan or a 12 month loan"
    }
]

我有一个绑定函数，它应该将验证函数绑定到列表中的每个元素：

this.bind = function () {
    for (var i = 0; i < _this.config.length; i++) {
        var arr = _this.config[i];
        console.log('Binding ' + arr.element + ' to single input validation')
        // bind single validation to each element
        $(document).on('keyup', arr.element, function () {
            _this.validate(arr.element)
        })
    }
}

在控制台中，我看到了：

Binding #Amount to single input validation
Binding #Type to single input validation
Binding #LoanPurpose to single input validation

配置实际上由47个元素组成，但是我确信在遍历配置之后只剩下最后一个绑定，所以就好像它每次都替换以前的绑定一样。

任何指针都会非常感激

由于

Answer 1

这是一个经典的javascript错误。嵌套的keyup处理函数引用变量arr，每次迭代都会被for循环覆盖。因此，当keyup处理程序最终执行时，它使用引用arr数组中最后一个元素的this.config。

此链接说明了why it's bad to make functions within loops。并为它提供解决方案。

以下是您的代码的外观：

this.bind = function () {
    for (var i = 0; i < _this.config.length; i++) {
        var arr = _this.config[i];
        console.log('Binding ' + arr.element + ' to single input validation')
        // bind single validation to each element
        _this.makeBind(arr.element)
    }
}

this.makeBind = function (el) {
    $(document).on('blur', el, function () {
        _this.validate(el)
    })
}

Answer 2

config.forEach(function(item) {
  $(document.body).on('keyup', item.element, function() {
    validate(item, this.value)
  });
});

您可以执行类似前面的操作，将项目和输入的当前值传递给验证功能

将动态元素绑定到函数;留下只有一个绑定

2 个答案: