jQuery forms.js ajaxSubmit执行后的默认表单提交行为

我正在使用jQuery Form Plugin将两个表单的提交事件绑定在同一页面上，以便将它们提交给单独的PHP脚本，这些脚本将标记返回到页面上的单独div。

一种forms刷新下一个。 我使用“live”，因此每个表单在刷新时都会重新绑定事件：

$(document).ready(function() { /* Form 1 */ $('#frmSearch').live('submit', function() { $(this).ajaxSubmit({ target: '#divResults', url: 'search_div.php' }); return false; }); /* Form 2 */ $('#frmResults').live('submit', function() { $(this).ajaxSubmit({ target: '#divLookup', url: 'lookup_div.php', }); return false; }); }); 

到现在为止还挺好。 每个表单都可以使用ajax一次又一次地提交，并且所有绑定都可以从一个提交到下一个提交。

当我尝试绑定第三个表单并在第二个表单的“success”选项中触发其提交事件时，会出现问题：

 /* Form 2 */ $('#frmResults').live('submit', function() { $(this).ajaxSubmit({ target: '#divLookup', url: 'lookup_div.php', success: function(responseText){ $('#frmLookup').submit(); } }); return false; }); /* Form 3 */ $('#frmLookup').live('submit', function() { $(this).ajaxSubmit({ target: '#divMappings', url: 'mapped_items_div.php', }); return false; }); 

当我这样做时，ajaxSubmit成功执行，但随后也执行了表单的默认提交，导致页面重新加载。 请注意，我确实包括“return false;” 抑制表单的默认提交，但由于某种原因它无论如何提交。

我发现，如果我在表格2的“提交”事件中“绑定”表格2的成功function，并使用与表格3的“直播”相同的选项，则不会执行表格的默认提交。 但这是多余的，如果可以，我想避免这样做。

如何抑制表单3的默认提交行为？

Answer 1

不确定它是否与您的问题有关，但live()不支持“ submit ”事件 ：

目前不支持： blur, focus, mouseenter, mouseleave, change, submit

Answer 2

我知道它应该是相同的，但由于这似乎是一个非常奇怪的行为，我会尝试替换

 $('#frmLookup').submit(); 

对于

 $('#frmLookup').trigger('submit'); 

看看是否有任何变化？

Answer 3

谢谢，crescentfresh，让我走上正轨。 对于我的解决方案，我修改了我的脚本，只打印嵌套在表单中的元素，而不是表单本身及其内容。 然后我将每个表单的“目标”更改为下一个表单而不是包含下一个表单的div。 这消除了为每个表单重新绑定submit事件的需要，因为来自前一个表单的ajax函数仅替换其内部元素而不是完全“刷新”它。

我还决定取消使用表单插件，只需使用“.serialize（）”和“.ajax”，如Paolo Bergantino所示。

我的最终产品看起来像这样：

 /* Form 1 */ $('#frmSearch').bind('submit', function() { var formdata = $(this).serialize(); $.ajax({ url: 'result_form.php', data: formdata, success: function(responseText){ $('#frmResults').html(responseText); } }); return false; }); /* Form 2 */ $('#frmResults').bind('submit', function() { var formdata = $(this).serialize(); $.ajax({ url: 'lookup_div.php', data: formdata, success: function(responseText){ $('#frmLookup').html(responseText); $('#frmLookup').trigger('submit'); } }); return false; }); /* Form 3 */ $('#frmLookup').bind('submit', function() { var formdata = $(this).serialize(); $.ajax({ url: 'mapped_items_div.php', data: formdata, success: function(responseText){ $('#divMappings').html(responseText); } }); return false; });