javascript - 将动态元素绑定(bind)到函数；只剩下一个绑定(bind)

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"
    }
]

我有一个绑定(bind)函数，应该将验证函数绑定(bind)到列表中的每个元素:

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 个元素组成，但是我确信在迭代配置后仅保留最后一个绑定(bind)，因此就好像它每次都替换以前的绑定(bind)。

任何指示将不胜感激

谢谢

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