Javascript 如何循环浏览表单ID'；s并向每个添加提交处理程序？

我有一个包含很多不同联系方式的网站。我想保留它们的ID（和其他相关设置）的数组，这样我就可以循环使用它们并向每个ID添加提交处理程序

问题在于，似乎只有数组中的最后一个窗体附加了一个处理程序

表格一览表：

forms = [
    {id: '#contact-form-1', ...},
    {id: '#contact-form-2', ...}
]

我如何尝试添加提交处理程序：

for (i in forms) {
    $(document).on('submit', forms[i].id, function(){
        // Validation, send email etc.
    }
}

---

$（document）.on（）方法正确吗？我尝试了$（forms[I].id）.submit（）；但我得到了同样的结果；只有列表中的最后一个表单被绑定。

可能希望以相反的方式进行绑定

/* listen for ALL submit forms */
$('form').on('submit', function() {

  /* get the id of the this one */
   var _id = $(this).attr('id');

    /* do some conditions on _ID */


));

因此，假设您的对象是：

var formIDs = {
      formidOne: { func : function() { alert('called form id one'); }},
      formidTwo: { func : function() { alert('called form id two'); }}
    };

那么你可以说：

$('form').on('submit', function() {

  /* get the id of the this one */
   var _id = $(this).attr('id');

    /* call the form function associated with this form id */
    formIDs[_id].func();

));

---

有几种方法可以做到这一点，这一切都取决于您希望如何组织代码，因为只需定义一次侦听器，这会更容易一些

---

添加编辑：没有真正解释原始代码中的错误-即

i

的上下文没有正确保留（已在注释中暗示）

解决方案是利用另一个功能：

function makeHandler (index) {
 $('#'+forms[index].id).on('submit', function(){... });
}

for (i in forms) {  makeHandler(i); }

这是查找在循环中生成函数相关问题的最佳位置-

---

---

仍然倾向于使用上述更易于维护/读取的处理程序（imo）

您可以在类似

$的闭包中执行

$.each(forms, function(index, item){
   $(document).on('submit', forms[index].id, function(){.....

})

如果没有jQuery，则可以为

循环索引创建

的闭包，具体操作如下：

for (i in forms) {

    (function(i){
       /* your code here */
     })(i);
}

问题是所有处理程序共享同一个变量“i”。调用事件处理程序时，
this
在调用处理程序时引用表单实例，因此您可能不需要在处理程序中使用“i”。事实上，您可以只使用一个适用于页面上所有表单的总体处理程序来完成所需的操作。您是否将相同的函数绑定到所有表单？因为如果你是这样做的话，你会让它变得不必要的复杂，可以使用
$（'form[id^=“contact form-”]）
，或者简单地切换到一个类名：
$（'form.contact form'）
。每个类都有不同的UI关联，否则我肯定会这样做。比维护表单列表容易得多<应为中的代码>或使用
hasOwnProperty（）
检查属性。。