WordPress 在后端添加小工具时执行 Javascript

问题描述

我有一些控件附有 javascript 控件。

如果窗口小工具出现在窗口小工具管理页面加载时，控件正常工作。

当我添加一个新的小工具时，它们无法正常工作，我得到了标记，但没有 javascript 事件生效。

如果我保存新的小工具，当表单重新加载时，控件将被正确创建，现在可以正常工作。

刷新页面也会解决问题，但仅适用于现有的小工具。新的小工具还有这个问题。

具体来说，我在这些点上选择输入选择：

文件准备好了
Ajaxcomplete

我已经验证了我的代码是按照需要在每个事件上运行的，但结果并不如预期。

这是一个测试插件，演示了这个问题：

https://gist.github.com/Tarendai/8466299

你会看到我有一个计数器增加与每个选择元素，它发现它可以转换。

笔记：

当小工具页面加载时，我可以按预期在 JS 控制台中看到计数器增加
当我添加一个新的小工具时，代码是运行的，但是，找不到可以运行的任何 select 元素，如 found.length 为 0 所示。不应该是这样，因为每一个新的 widget 都应该有一个选择元素
选择元素有一个类来标识它们，一旦应用选择库来防止重复，并且现有的小工具上的 re-processing 就会被删除。
在使用 selectize 之前，我使用了 Select2，它有同样的问题
注释 AJAX 代码，我希望新的小工具具有标准的选择输入。他们不。我不知道为什么会这样

那么如何使选择控制工作没有告诉用户在进行更改之前刷新/单击保存？

最佳解决方案

好消息，

我已经修复了

抱歉，在我的初始评论中错过你的想法，并给出你已经实施的答案。在火车上，我会教我在手机上回答

你使用 ajaxstop 是正确的。大多数情况下，JS 的地狱工作正常，您可以看到正在初始化的 css 样式和 DOM 中的更改。

问题在于你的选择器。

这是因为小工具内容没有通过 ajax 加载，实际上它从隐藏的左侧列中克隆，然后触发 ajax 调用以将小工具的位置保存在右侧列中。这就解释了为什么 ajaxstop 工作，即使想到的内容被克隆。但是，由于左侧栏中有一个隐藏版本的小工具，您的 JS 正在实例化。因此，当您将其拖动到右侧列时，您将收到隐藏的小工具的破碎的克隆。

因此，您需要在左侧选择一个。以下是更正的代码：

<script>
jQuery( document ).ready( function( $ ) {
    function runSelect() {
        var found = $( '#widgets-right select.testselectize' );
        found.each( function( index, value ) {

            $( value ).selectize();
                .removeClass( 'testselectize' )
                .addClass( 'run-' + window.counter );

            console.log( $val );
            window.counter++;
        } );
    }

    window.counter = 1;

    runSelect();

    $( document ).ajaxStop( function() {
        runSelect();
    } );
} );
</script>

次佳解决方案

作为 @ aaron-holbrook 评论说，一个更清洁的方法将是：

<script>
$(document).on('widget-updated widget-added', function(){
    // your code to run
});
</script>

只是粘贴在这里作为参考，答案更容易找到这些评论

参考文献

Executing Javascript When a Widget is Added in the Backend

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

WordPress 在后端添加小工具时执行 Javascript