Question

我想提交一个属于加载页面的表单（我使用load（））。当我点击按钮提交时，没有任何反应。

加载页面的Html代码：

    <form id="my_form" method="post" >
         *** some inputs ***
        <input id="submit_button" type="submit" value="Confirm" />
    </form>

加载页面的jQuery代码：

$("#submit_button").on('click', function() {        

    $('#my_form').submit(function(){ 
        var myForm = $(this);       

        $.ajax({
            dataType: 'json',               
            type: "POST",
            url: "../treatment_page.php", 
            data:myForm.serialize(),
            success: function(data){
                    if (data.a == true){
                          parent.$.colorbox.close();
                    }else{
                         alert("Problem!");
                    }          
            }
        });                 
    return false;       

    });

});

treatment_page.php没关系，它会对待我的其他表单，而不是usnig on（）。 treatment_page.php进入父文件夹。除了此表单提交外，所有jQuery操作在加载的页面脚本中都能正常工作。

Answer 1

在提交按钮上单击，您只需将submit处理程序附加到表单。您不需要提交按钮单击处理程序。只需将此代码保留在父页面上，并且不需要呈现此脚本以及load响应。

$(document).on('submit', '#my_form', function(){ 
        var myForm = $(this);       

        $.ajax({
            dataType: 'json',               
            type: "POST",
            url: "../treatment_page.php", 
            data:myForm.serialize(),
            success: function(data){
                    if (data.a == true){
                          parent.$.colorbox.close();
                    }else{
                         alert("Problem!");
                    }          
            },
            error: function(){
                //Error handler
            }
        });                 
    return false;       

});

如果您使用的是旧版本，那么

on将在jQuery 1.7中引入，您可以使用delegate。试试这个。

$(document).delegate('#my_form', 'submit', function(){ 
        ....
        ....
});

Answer 2

将onSubmit处理程序移到click处理程序之外。

$('#my_form').submit(function(){ 
    var myForm = $(this);       

    $.ajax({
        dataType: 'json',               
        type: "POST",
        url: "../treatment_page.php", 
        data:myForm.serialize(),
        success: function(data){
                if (data.a == true){
                      parent.$.colorbox.close();
                }else{
                     alert("Problem!");
                }          
        }
    });                 
return false;       

});

从加载的页面提交表单

2 个答案: