小部件中的 Wordpress 核心颜色选择器（虹膜） - 在 wordpress 定制器中编辑时刷新答案

【问题标题】：Wordpress core color picker (iris) in widget - refresh when edited in wordpress customizer小部件中的 Wordpress 核心颜色选择器（虹膜） - 在 wordpress 定制器中编辑时刷新
【发布时间】：2016-05-23 04:02:07
【问题描述】：

我已将 Wordpress Core 颜色选择器（虹膜）添加到我开发的小部件中，但是当您编辑颜色时，没有触发更改。因此，除非您触发另一个输入字段中的更改，否则定制器的 iframe（实时预览）不会更新。

Javascript 初始化颜色选择器

var myOptions = {
// you can declare a default color here,
// or in the data-default-color attribute on the input
defaultColor: '#000',
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){

},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
// or, supply an array of colors to customize further
palettes: true
};

// Add Color Picker to all inputs that have 'color-field' class
$('.color-field').wpColorPicker(myOptions);

注意：

我测试了将以下代码添加到更改回调中。

change: function(event, ui){
    $(this).trigger('change'); 
},

这将在用户单击颜色选择器时触发更改并更新iframe，但它发生在颜色值保存之前。

有没有人碰巧知道在选择的颜色保存后如何访问该事件？

我将不胜感激。

谢谢！

【问题讨论】：

您是否将颜色选择器样式和脚本排入队列？ wp_enqueue_style( 'wp-color-picker'); 和 wp_enqueue_script( 'wp-color-picker');?
我刚才测试了一下，好像不行。我不确定我是否遗漏了什么，但我找到了解决方法。感谢 ding_d 的回复！
随时发布解决方法作为答案，以便它可以帮助可能遇到相同问题的人:)

标签： javascript jquery wordpress iframe colors

【解决方案1】：

我不确定这是否是最佳解决方案，但它似乎可以解决问题。

 add_action( 'admin_footer-widgets.php', array( $this, 'print_scripts' ), 9999 );

public function print_scripts() {
    ?>
    <script>
        ( function( $ ){

            function initColorPicker( widget ) {
                widget.find( '.color-field' ).wpColorPicker( {
                    change: _.throttle( function() { // For Customizer
                        $(this).trigger( 'change' );
                    }, 3000 )
                });
            }

            function onFormUpdate( event, widget ) {
                initColorPicker( widget );
            }

            $( document ).on( 'widget-added widget-updated', onFormUpdate );

            $( document ).ready( function() {
                $( '#widgets-right .widget:has(.color-field)' ).each( function () {
                    initColorPicker( $( this ) );
                } );
            } );



        }( jQuery ) );

    </script>
    <?php
}

我相信这里的解决方法是您想要激活 ('.color-field').wpColorPicker() -> .on('widget-added widget-updated') 以及文档准备好时。

【讨论】：