Question

我的网站包含许多不同的联系表单。我想保留他们的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（）;但我得到了同样的结果;只有列表中的最后一个表单才会被绑定。

Answer 1

可能希望反过来这样做。

/* 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的上下文未正确保留（已在评论中暗示）< / p>

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

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

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

这是查找循环函数问题的最佳位置 - How to fix jslint error 'Don't make functions within a loop.'?

仍然倾向于使用上面的一个处理程序，更容易维护/阅读（imo）

Answer 2

您可以在$.each之类的闭包中执行此操作。

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

})

如果没有jQuery可以创建for循环索引的闭包：

for (i in forms) {

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

如何遍历表单ID列表并为每个表单添加提交处理程序？

2 个答案: