wordpress widget plugin color picker do not work correctly

Need to add color picker to the widget plugin.

wp_enqueue_style( 'wp-color-picker' );        
    wp_enqueue_script( 'wp-color-picker' ); 
    wp_enqueue_script( 'wp-color-picker-script-handle', plugins_url('js/wp-color-picker-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );

In wp-color-picker-script.js file

Read More
jQuery(document).ready(function($) {
  $(".color-picker").wpColorPicker();   
});

If I write the above code, after clicking the save button, color picker dissapear and shows just a text box.

If I write:

jQuery(document).ready(function($) {
  $(".color-picker").wpColorPicker();  
  $(document).ajaxSuccess(function(e, xhr, settings) {
    $(".color-picker").wpColorPicker();
  });
});

It duplicates color picker.

If I remove the first $(“.color-picker”).wpColorPicker(); The color picker appears when the save button is clicked.

What is the correct way to add color picker to work.

Related posts

Leave a Reply

1 comment

  1. Just edit your code like this it works fine

    jQuery(document).ready(function(){
                    jQuery('#widgets-right .color-picker, .inactive-sidebar .color-picker').wpColorPicker();
                });
                jQuery(document).ajaxComplete(function() {
                    jQuery('#widgets-right .color-picker, .inactive-sidebar .color-picker').wpColorPicker();
                });