Question

我使用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成功执行然后形成年代默认提交执行,导致页面重新加载。注意到我做的包括“返回false;“抑制形成年代默认提交,但出于某种原因,提交。

我已经发现,如果“绑定”形式3 s“提交”事件形式2 s成功功能相同的选项的“活”形式3、形成年代默认提交不执行。这是多余的,如果我可以我想避免这样做。

我怎么能抑制形式3 s默认提交行为吗?

Answer 1

谢谢,crescentfresh,让我在正确的轨道上。我的解决方案,我修改脚本只打印元素中嵌套的形式而不是形式本身及其内容。然后我改变了“目标”的形式到另一个形式,而不是包含下一个形式的div。这消除了需要re-bind每个表单的提交事件以来ajax函数仅仅从之前的形式取代它的内在元素,而不是完全的“提神”。

我也决定是适当的表单插件和简单地使用“.serialize ()”。ajax”说明了保罗柏甘蒂诺< a href = " https://stackoverflow.com/questions/550370/jquery-form-returned-on-success-needs-re-binding " > < / >。

我的最终产品是这样的:

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

Answer 2

不知道这年代相关问题,但< a href = " http://docs.jquery.com/Events/live " rel = " nofollow noreferrer " > <代码>生活()< /代码>不支持“<代码> < /代码>提交”事件< / >:

Currently not supported: blur, focus, mouseenter, mouseleave, change, submit

Answer 3

我知道这应该是一样的,但因为这似乎是一个很奇怪的行为,我将尝试更换

$( #frmLookup ).submit();

为

$( #frmLookup ).trigger( submit );

是否改变什么吗?

友情链接