Wordpress―在管理面板中创建 Widget 后运行 JS答案

【问题标题】：Wordpress―run JS after Widget was created in Admin panelWordpress―在管理面板中创建 Widget 后运行 JS
【发布时间】：2013-04-03 08:43:40
【问题描述】：

我正在开发一个包含自定义小部件的 Wordpress 主题，一切正常，但有一件事我不知道如何正确实现：

我想在管理面板中创建小部件实例后运行一些 Javascript，这意味着在小部件被放到侧边栏中之后的那一刻，而不是在保存之后。

在加载页面或保存小部件后运行 JS 没有任何问题，我想在用户刚刚将新实例放入侧栏后运行 Javascript，实际上可能会发生多次而无需重新加载页面。

问候菲利普

【问题讨论】：

标签： widget wordpress wordpress-theming

【解决方案1】：

在小部件表单函数中放置一个脚本标签。

function form($instance)
{
?><script type="text/javascript">console.log("firing javascript");</script>
<?php
//form details...

}

我最终采取了不同的方式。使用 wp_enque_script 在页面上加载我们的插件管理脚本，然后只使用 jquery 选择器和事件处理程序来定位正确的小部件。

$('div.widgets-sortables')
                .on('sortstop', function (event, ui) {
                    // only if this widget has the proper identifier...do something
                    if (ui.item.find('.my_widget').length == 0)
                        return;
                    run some function...

仍然不是我最喜欢的技术……但它比在小部件中编码更简洁。是否需要一个变量来跟踪创建的小部件，并且使用“this”变量很有用

【讨论】：

这似乎是我目前为止工作的唯一方法，尽管似乎必须有更好的方法来做到这一点......

【解决方案2】：

我刚刚想出了另一种方法--

我将展示一个涉及依赖关系的更复杂的示例，尽管意识到Custom_Widget::form() 中的位是问题的真正答案：

function add_js_deps() {
  if (is_admin()) {
    wp_enqueue_script('jquery-ui-accordion');
  } 
}
add_action( 'init', 'add_js_deps' ); // "init" because wp_enqueue_scripts is too late.

// Then in the widget....
class Custom_Widget extends WP_Widget {
  public function form($instance) {
    /** Collapsing accordion-y form HTML here **/
    wp_enqueue_script('custom-js', plugins_url('js/my.js', __FILE__), array('jquery-ui-accordion'), '1.0.0', true);
  }
}

我认为这是更好的途径，因为它具有依赖管理，并且您不会在 DOM 中途有一堆 JavaScript。无论如何，使用wp_enqueue_script 通常总是更符合 WordPress 风格。

【讨论】：