ajax - 从加载的页面提交表单

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 没问题，它处理我的其他表单，不使用 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(){ 
        ....
        ....
});