javascript - 在 WordPress 中使用 wp_editor 时，序列化仅在第二次提交时返回完整表单

Question

我有一个表单，正在尝试使用 serialize 将其转换为 AJAX。仅当用户开始在标题字段中输入时，大部分表单本身才会由 AJAX 加载。

<form id="new_post" onsubmit="ajaxSubmit()">
    <input onclick="loadEditor()" class="editor" name="post_title" placeholder="Let us know what you're thinking - post something." />
    <div class="ajax_editor"></div>
</form>

这是 loadEditor 的代码，它加载一个包含 Wordpress TinyMCE 编辑器的页面。

function loadEditor(preloaded) {
    if(preloaded!=true) {
        jQuery.ajax({url: "post-editor", success: function(result){
            jQuery(".editor").attr("onclick","");
            jQuery('.ajax_editor').addClass('active');
            jQuery(".ajax_editor").html(result);
            jQuery(".ajax_editor").fadeOut(0);
            jQuery(".ajax_editor").fadeIn(800);
        }})
    }
    else {
            jQuery(".ajax_editor").fadeIn(500);
    }
}

这是 ajaxSubmit 的代码(当前仅在我测试时输出到控制台)。

function ajaxSubmit() {
    event.preventDefault();
    var form_elements = jQuery('#new_post').serialize();
    console.log( form_elements );
};

但是，当ajaxSubmit运行时，只有post_title被传递到form_elements，并且post_content存在但为空。如果我第二次“提交”表单，它会包含预期的所有内容。

如果我随后编辑表单内容并再次提交，则它的表现就好像没有任何更改(form_elements 记录到控制台，但显示之前的 post_content) ;进一步提交时，它包含新的 post_content。

但是，如果我更改 post_title，表单始终会正确提交。

这是因为我已将表单分两段加载，还是还有其他原因？

Answer 1

在调用 $form.serialize() 之前；您需要调用tinyMCE.triggerSave();

tinyMCE.triggerSave();
var data = $form.serialize();