如何使用jQuery/Ajax刷新一个包含表单的div？

Question

我很快就写好了所有的代码，但我不确定您是否需要看到它才能理解我的想法。

基本上，我正在使用基本的：

$("#formToLoadPageInto").load("thePageToLoad.php").fadeIn("fast");

现在工作都进行得很好，但页面已经加载了一个表单。在使用该加载之前，第一次工作得很好（提交表单），但是在重新加载带有该代码的页面后，重新加载的页面上的表单不再提交。

我读过，不应将诸如此类的内容放在$(document).ready(function(){中，但它实际上一直在外面。所以我真的不知道可能出了什么问题。

一切都基于不刷新页面...到目前为止，我已经成功做到了这一点，但这些问题（和一些相关问题）正在阻碍我的进展！希望有人能帮帮我...

编辑：

也许这会有所帮助：

我有两个不同的div-"post comment"和"posted comments"。

"post comment" div有一个提交评论的表单。这是一个php页面加载到一个div中。这很好用。当表单被提交时，它使用这个代码：

$("#newpost").validate({
        debug: false,
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('postthought.php', $("#newpost").serialize(), function(data) {
                $('#hideload').html(data);
            });
        }
});

在那之后，我尝试重新加载已发布评论的div（其中包含一个以php编写的表单，用于加载所有已发布的评论以供查看和删除）

$("#formToLoadPageInto").load("thePageToLoad.php").fadeIn("fast");

如前所述，它可以工作并显示新内容，但我无法使用此页面上的表单来查看或删除评论。

希望这不会太令人困惑。

- user1162534

---

你的 AJAX 响应内容中是否也包含表单？否则，表单将被覆盖。 - Jere

你是否将整个页面加载到 "#formToLoadPageInto" 中？而且，正如 ID 所示，"#formToLoadPageInto" 是否是一个 <form> 元素？换句话说，你是否将一个 <form> 放在另一个 <form> 中？ - user1106925

不，表单并没有重新加载到表单中，而是重新加载到 div 中。 - user1162534

Answer 1

$("#formToLoadPageInto").empty().load("thePageToLoad.php?" + Math.random()).fadeIn("fast");

- thecodeparadox

---

@user1162534 随机数以防止缓存 - thecodeparadox

那里不应该有一个问号吗？最好放在php扩展名和随机数之间。 - adeneo

我一直避免在URL末尾使用"php?="。目前为止还不错，我想保持这种方式。还有其他建议吗？ - user1162534

Answer 2

如果表单本身正在被替换，您需要重新应用表单提交处理程序或使用一个委派给未被替换的元素（例如文档本身）的处理程序。

$('#formToLoadPageInto').on('submit','form', function() {
     ... do submission...
     $('#formToLoadPageInto').load('thePageToLoad.php').fadeIn('fast');
});

- tvanfosson

Answer 3

看起来“发布的评论”div（其中包含一个新的查看/编辑表单）已经成功地插入到DOM中，但您没有初始化其JavaScript控件。

例如，如果该表单具有评论列表和每个评论的“编辑”按钮，则DOM准备处理程序中的以下内容将起作用：

$('#formToLoadPageInto').on('click','form input[name="editButton"]', function() {
    var $this = $(this);
    var formData = {
        commentID: $this.val(), 
        commentBody: $this.siblings('textarea').text()
    };
    $.post('editComment.php', formData, function(response) {
        //....
    });
});

（这使用委托将单个事件处理程序“预先连接”到与给定选择器匹配的所有当前和随后插入的控件。）

- Joe Coder