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

【问题标题】：Default form submit behavior after jQuery forms.js ajaxSubmit executesjQuery forms.js ajaxSubmit 执行后的默认表单提交行为
【发布时间】：2010-10-14 19:04:00
【问题描述】：

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

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

$(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 一次又一次地提交，并且所有绑定从一次提交到下一次都存在。

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

/* 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”；禁止表单的默认提交，但由于某种原因它仍然提交。

我发现，如果我在 Form 2 的成功函数中使用与 Form 3 的“live”相同的选项“绑定”Form 3 的“提交”事件，则不会执行表单的默认提交。不过，这是多余的，如果可以的话，我想避免这样做。

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

【问题讨论】：

标签： jquery forms plugins binding jquery-plugins

【解决方案1】：

不确定是否与您的问题有关，但live() does not support the "submit" event：

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

【讨论】：

【解决方案2】：

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

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

为

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

看看这是否改变了什么？

【讨论】：

【解决方案3】：

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

我还认为取消表单插件并简单地使用“.serialize()”和“.ajax”是合适的，如 Paolo Bergantino here 所示。

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

/* 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;
});

【讨论】：