ajax/jquery 的多种形式？答案

【问题标题】：multiple forms with ajax/jquery?ajax/jquery 的多种形式？
【发布时间】：2009-08-24 13:22:38
【问题描述】：

我正在使用这个插件：http://malsup.com/jquery/form/#getting-started

我遇到了问题，让它在页面上同时提交（使用单个函数）多个表单，为了使它更复杂，我正在通过远程 html 调用通过 ajax 加载表单。所以需要再次加载表单函数。

问题是如何使用（如果可能）可以同时提交多个表单的可重用函数。

【问题讨论】：

【解决方案1】：

也许你可以使用LiveQuery 插件来解决这个问题。例如，它可以像这样工作

<button ... rel="formId"/>
jQuery(".formButton").livequery("click",function() {
  var formId=jQuery(this).attr("rel");
  jQuery("#"+formId).ajaxSubmit();
}

因此，带有 .formButton 类的按钮可以包含在服务器响应中，并且使用 livequery 也可以处理它。希望能帮助到你。对不起我的英语。

【讨论】：

请注意阅读此答案的任何人...... jQuery 现在有一个 $.live() 函数，可以将事件侦听器绑定到动态 DOM 节点。不需要插件来做到这一点。

【解决方案2】：

jQuery 插件将事件监听器添加到您指定的表单的 onsubmit 事件。因此，为了同时提交多个表单，您需要一个调用每个表单的提交事件的函数。像这样的：

function doubleSubmit(e) {
 if (e.target.id == 'form2') {
   $('#form1').submit();
  } else {
   $('#form2').submit();
  }
}

下一个技巧是在任一表单提交时调用此函数。我会这样做：

$("#form1").bind("submit", doubleSubmit);
$("#form2").bind("submit", doubleSubmit);

我没有测试过这段代码，但它应该能给你大致的想法。

【讨论】：

我不相信这会奏效。这不会只是提交“另一个”表单，因为会发生一个回发，取消另一个？

【解决方案3】：

您不能一次提交多个表单。但是您可以按顺序提交它们

function submitFn() {
$('form').each(function() {
$.post(url, data, function() {
... 

 }
return false;
});}

并添加监听器：

$('form').bind('submit', submitFn);

return false 很重要，因为如果你没有它，那么提交的第一个表单将提交两次

【讨论】：

【解决方案4】：

我可能会选择这样的东西：

// after you import the html
$("#form1, #form2").bind("submit", submit);
// or simply
$("form").bind("submit", submit);

function submit() {
  /// a $.post implementation selecting all the controls and passing them as data
  return false; // to prevent an actual browser submit
}

【讨论】：