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

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处理程序最终执行时，它使用引用this.config数组中最后一个元素的arr。

此链接解释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) 
    }); 
}); 

你可以不喜欢前面通过这两个项目，输入的电流值的验证功能