如何使用 jquery/ajax 正确刷新包含表单的 div？

Posted 2023-02-22

【中文标题】如何使用 jquery/ajax 正确刷新包含表单的 div？

【英文标题】：How do I properly refresh a div, with jquery/ajax, that contains a form?

【发布时间】：2012-02-15 19:27:46

【问题描述】：

我已经写出了我所有的代码。我不完全确定您是否需要看到它才能获得想法。

基本上我用的是基本款：

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

现在，一切正常，但加载的页面有一个表单。它在必须使用该负载之前第一次工作（提交表单），但之后（使用该代码重新加载时）重新加载的页面上的表单不再提交。 我读过你不应该在$(document).ready(function() 正文中放置类似的东西，但它实际上一直不在此范围内。所以我真的不确定有什么问题。

一切都基于不刷新页面。到目前为止，我已经成功地做到了这一点，但是这个问题（以及一些相关问题）阻碍了我！希望有人能帮帮我..

编辑：

也许这会有所帮助：

我有 2 个不同的 div——“发表评论”和“发表的 cmets”。

post comment div 有一个提交评论的表单。这是一个加载到 div 中的 php 页面。这工作正常。提交表单时，它使用以下代码：

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

运行后，我尝试使用

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

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

希望这不会太令人困惑..

【问题讨论】：

那么，您的 ajax 响应中的内容是否也包含表单？否则，表单将被破坏。

您是否将整个页面加载到"#formToLoadPageInto" 中？ "#formToLoadPageInto" 是 ID 所暗示的 <form> 元素吗？换句话说，您是否将<form> 放在<form> 中？

不，表单没有被重新加载到表单中，它正在被重新加载到 div 中..

【参考方案1】：

听起来“posted cmets” div（其中包含一个用于查看/编辑的新表单）很好地插入到 DOM 中，但是您没有初始化它的 javascript 控件。

例如，如果表单有一个 cmets 列表和每个 cmets 的“编辑”按钮，则 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) 
        //....
    );
);

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

【参考方案2】：

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

【讨论】：

@user1162534 防止缓存的随机数

那里不应该有一个问号，最好是在php扩展和随机数之间？

我一直远离网址末尾的“php？=”。到目前为止一切顺利，我想保持这种状态。还有其他建议吗？

【参考方案3】：

如果表单本身被替换，您需要为表单提交重新应用处理程序，或者使用委托给未被替换的元素（可能是文档本身）的处理程序。

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