来自ajax请求的Jquery Ajax表单答案

【问题标题】：Jquery Ajax Form from ajax request来自ajax请求的Jquery Ajax表单
【发布时间】：2012-07-12 15:58:41
【问题描述】：

我做了一个 jQuery 表单 (form1)，它通过 ajax 在该页面中带来了另一个表单(form2)。现在我想通过ajax提交form2数据。

但是每当我单击按钮时，它都会提交整个页面。我的意思是整个页面重新加载。

$(document).ready(function() {
        $("#form2").submit(function() {
            $(this).ajaxSubmit({
                    beforeSubmit: function(before) {
                        $('.loading_result').html('Loading...');
                    },
                    success: function(dd) {
                        $('.loading_result').html(dd);
                    }
            }); 
            return false;
        });

    });

父页面中的所有 JavaScript 代码。我在 ajax 页面中没有任何 JavaScript 代码

page.php * 此页面中有一个表格（form1）。 * 所有的jQuery函数都在page.php里面

form1 提交时，从 page2.php 中带入数据 // 效果很好。 ** page2.php 给出 form2。

现在，当我提交 from2（在 ajax 请求之后也在 page.php 中）时，它不会触发 page.php 中的 jquery 函数

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

我通常不将表单提交绑定到$(document).ready，而是在表单的按钮上包含一个“onclick”事件：

<button type='submit' onclick='MyAjaxFunction();return false;'>Submit</button>

onclick 的return false; 部分将阻止表单提交。

【讨论】：

使用这种方法，如何获取表单的post数据？
谢谢。我使用 $.ajax 和数据序列化 :)

【解决方案2】：

这是因为表单是在传统意义上提交的。这是提交事件的默认操作。你需要抑制这个：

$("#form2").submit(function(evt) {
    evt.preventDefault(); //<-- prevent the event's default action
    //code here...

【讨论】：

不。它仍然加载页面
这绝对是抑制提交事件的方法 - here's the proof。也许您的目标是错误的选择器，或者没有完全实现我发布的代码。请参阅 JS Fiddle。
$("#form2").submit(function() { 这一行在 document.ready ==> 页面加载时，没有 id 为“form2”的表单。难道是有问题吗？
那么我唯一能想到的（没有看到你的情况的 JSFiddle）是你 $("#form2").submit(... 行在表单 2 实际插入页面之前运行。这意味着事件回调永远不会触发，因为在设置它的时候，元素 (#form2) 不在 DOM 中。如果是这种情况，您需要在将事件插入 DOM 时绑定事件，而不是在 DOM 准备好时绑定。如果没有看到 Fiddle，我真的无法再提供任何建议了。
但是return false 在提交表单时几乎相同（阻止提交）。