目前,core中的小部件并不容易做到这一点。请阅读Live Widget Previews: Widget Management in the Customizer in WordPress 3.9, 尤其是“不再更新按钮(通常)”部分:
管理页面上的小部件表单有一个熟悉的保存按钮。在以前版本的Widget Customizer中,我们将Save按钮改为Update按钮,因为它实际上不会保存Widget,而只会用Widget的最新状态更新预览。但是,必须单击此更新按钮才能查看预览更新是一种糟糕的用户体验,没有必要。因此,我们实现了一种提交表单的方法,以便在控件中的字段更新时更新预览中小部件的状态:更新按钮被隐藏,并且在更改与预览同步时显示微调器。
当您与小部件表单交互时,实时提交小部件表单的逻辑取决于小部件表单中的字段是否与小部件表单清理后返回的字段相同。这是为了使字段可以对齐,以便使用经过清理的值进行更新。我们无法访问widgets管理页面上的widgets表单,这些表单实际上被新清理的表单完全替换,因为这会干扰用户快速输入这些字段。
因此,如果小部件表单动态添加或更改包含的输入字段,则键入时的实时更新将停止,更新按钮将重新出现。当您单击此按钮时,表单将替换为经过清理的版本,就像小部件管理页面上一样。我们还引入了新的jQuery事件来帮助处理这些表单更改…
因此,您需要仔细确保PHP动态生成与JS中生成的字段相同的字段,以确保在update-widget
Ajax请求返回WP_Widget::form()
输出
在定制器中实现小部件的方式并不理想,但是这样做是为了最大限度地提高向后兼容性。要了解使小部件由JavaScript驱动而不是PHP驱动的新方法,请参阅#33507 还可以查看JS Widgets 功能插件,完全避免了您面临的问题,因为JS用于完全管理小部件的表单UI。