iris color picker in widget – click event doesn’t fire when initially when widget is first created

I added the wordpress(iris) color picker to a widget, and the color picker is not clickable when the widget is first created. My guess is that it’s where/how the javascript file is being enqueued, but I am having a hard time pin pointing the solution to the problem.

enqueue portion of widget

add_action( 'admin_enqueue_scripts', 'enqueue_color_picker' );
function enqueue_color_picker( $hook ) {

    if(is_admin()){
        // Add the color picker css file
        wp_enqueue_style( 'wp-color-picker' );
        wp_enqueue_script( 'wp-color-picker' );
//         Include our custom jQuery file with WordPress Color Picker dependency
        wp_enqueue_script( 'custom-script-handle', plugins_url( 'assets/js/custom-script.js', __FILE__ ), array(), false, true );
    }

}

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);