Question

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

一个表单刷新下一个表单。我使用“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的成功功能，并使用与表格3的“现场”相同的选项，则不会执行表格的默认提交。但这是多余的，如果可以，我想避免这样做。

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

Answer 1

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

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

Answer 2

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

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

的

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

看看是否会改变什么？

Answer 3

谢谢，crescentfresh，让我走上正轨。对于我的解决方案，我修改了我的脚本，只打印嵌套在表单中的元素，而不是表单本身及其内容。然后我将每个表单的“目标”更改为下一个表单而不是包含下一个表单的div。这消除了为每个表单重新绑定submit事件的需要，因为来自前一个表单的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;
});

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

3 个答案: