Script
<script type="text/javascript"> ( function( $ ){ function initColorPicker( widget ) { widget.find( '.color-picker' ).not('[id*="__i__"]').wpColorPicker( { change: _.throttle( function() { $(this).trigger( 'change' ); }, 3000 ) }); } function onFormUpdate( event, widget ) { initColorPicker( widget ); } $( document ).on( 'widget-added widget-updated', onFormUpdate ); $( document ).ready( function() { $( '.widget-inside:has(.color-picker)' ).each( function () { initColorPicker( $( this ) ); } ); } ); }( jQuery ) ); </script>
Widget color picker code.
<p> <label for="<?php echo esc_attr( $this->get_field_id( 'rm_background' ) ); ?>"><?php _e ( 'Background', 'text-domain' ); ?></label> <input id="<?php echo esc_attr( $this->get_field_id( 'rm_background' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'rm_background' ) ); ?>" value="<?php echo $instance['rm_background']; ?>" class="wp-color-result"/> </p>