通过 AJAX 更新 wordpress 表单第二次不起作用

Posted 2023-05-09

【中文标题】通过 AJAX 更新 wordpress 表单第二次不起作用

【英文标题】：Updating wordpress form via AJAX does not work the second time

【发布时间】：2013-04-06 16:05:42

【问题描述】：

我使用设置 api 在 wordpress 中构建了一个主题选项页面。我想使用 ajax 更新页面上的表单。他们似乎第一次工作正常，但是当我再次单击“提交”而不刷新页面时，整个页面只给了我一个“0”。 请注意，由于我使用 wordpress native 处理错误和验证，因此使用 AJAX 重新加载整个表单。我知道这很奇怪，因为触发 ajax 请求本身的表单被重新加载。让我知道是否有解决方法。这是代码

$cg("#cgform").submit(function()
    var b = $cg(this).serialize();
    var cgdata =   action : "cg_options_save", cgnonce: cgform.cgnonce ,data: b ;
    cg_ajax_request(cgdata,cg_form_callback);  
    return false;
);

//Ajax request
function cg_ajax_request(data,fcall)
    $cg.post(ajaxurl, data, function (response) fcall(response);); 

cg_ajax_callback 函数将接收到的表单填充到 div 中。

请告诉我“正确”的处理方式

【参考方案1】：

问题在于事件处理程序绑定到由 ajax 调用重新加载的表单。第二次尝试提交表单时，它实际上是第一个 ajax 调用插入的新实例，它没有附加事件处理程序。改为使用on 方法绑定事件处理程序，这将在插入新表单时将事件处理程序动态绑定到新表单。

$cg(document).on('submit', "#cgform", function()
    var b = $cg(this).serialize();
    var cgdata =   action : "cg_options_save", cgnonce: cgform.cgnonce ,data: b ;
    cg_ajax_request(cgdata,cg_form_callback);  
    return false;
);

【讨论】：

我试过这个，但现在它甚至第一次都无法正常工作。您的解释很有道理，但解决方案似乎不起作用

试用更新版本。 $cg 在我看来就像一个 jquery 对象，但我猜这是你对全局 jquery 对象的覆盖？

是的，它的覆盖 jQuery(document).ready(function($cg) 并且此更新也不起作用:( 我正在阅读 .on() here 的在线文档，他们没有像你那样使用它。但是他们的方式也行不通

当您说它不起作用时，实际发生了什么？第一次提交表单是否使用on 方法？您是否检查过由 ajax 请求插入的表单的 html？是id 属性实际上设置为cgform 吗？

忘记我之前写的。我没有执行 preventDefault 来阻止表单操作冒泡。愚蠢的我。在包含document 之后，你的方法就像一个魅力。你能解释一下为什么我们需要添加这个吗？这也是我的表单的一个好方法吗？我正在考虑安全性和速度