jquery - 为生成的表单捕获提交，以便用户将在 div 中看到处理后的结果

Question

用户点击一个菜单，并使用以下代码，菜单$.load()是它的链接内容：

$(function() {
    $('#menu a').click(function() {
        $('#content').load(this.href);  
        return false;
    });
});

好的，现在表单已加载。还有一个问题。提交表单时，结果不应将我们带到真实action地址。所以我使用以下代码：

$('#content').on('submit', function() { // catch the form's submit event
    alert('begin');
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            alert('aaaa');
            $('#content').html(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
}); 

不幸on的是没有被调用并且alert('begin');不起作用！

感谢jquery 提交表单，然后在现有 div 中显示结果

Answer 1

我已经输入了第一个代码和平$(document).ready(function() {});，但它运行得非常完美，但是如果没有准备好文档，第二个代码就无法工作。

但为什么？我不知道。

现在可以使用的最终代码如下：

$(document).ready(function()
{
    $('#content').on('submit', 'form', function() { // catch the form's submit event
        alert('begin');
        $.ajax({ // create an AJAX call...
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function(response) { // on success..
                $('#content').html(response); // update the DIV
            }
        });
        return false; // cancel original event to prevent form submitting
    }); 

});

谢谢你们的尝试。