使用JQuery deferred与.each()方法

Question

您有没有想过如何使用JQuery的延迟方法来检测所有更改的表单，并将每个表单作为Ajax提交？

如果我只列出一堆表单提交，我也可以让它们工作，但是如果我使用...

$('form.changed').each(function(){
  return $(this).submitWithAjax();
});

这是我试图让其正常运行的代码完整版本... 在JS Fiddle上查看 提前感谢！

- Kevin Monk

---

您能否澄清您的问题？我不确定我理解了（但我非常确定我的回答是错误的...） - Pointy

Answer 1

使用 ".map()" 而不是 ".each()":

var deferreds = $('form.changed').map(function(i, elem) {
  return $(this).submitWithAjax();
});

$.when.apply(null, deferreds.get()).then(function() { ... });

"$.when()" 允许您将一组deferred对象捆绑在一起，并等待它们全部成功（或任意一个失败 - 注意区别）。通常它允许任意数量的参数，但由于我们有一个数组，所以我使用了 "apply()"。

请注意，我只是轻微地使用了这些东西，因此请阅读jQuery API文档以进行双重检查 :-) 编辑 - 另外，在重新阅读您的问题时，我可能误解了您的意思。

- Pointy

---

这个完美地运行了。谢谢你的帮助。只是想弄清楚为什么它现在能工作。 - Kevin Monk

“Deferred”功能是那些相当简单的东西之一，但我同意它确实很难完全理解机制是如何工作的 :-) - Pointy

Answer 2

将更改事件委托给表单字段可能会解决您在此处遇到的问题。

$('form').delegate('input[type=text], input[type=radio], select', 'change', 
function(evt){
    // your submits here
    console.log('changed!')
});

- wannabenerd

---

感谢您的回复，但检测表单上的更改并不是问题。' $（“form：input”）.live（'change'，function（）{ //如果表单输入更改 $（this）.closest（'form'）.addClass（“changed”）; }）;' - Kevin Monk