wpColorPicker is not a function!

i tried to use iris color picker in my plugin admin area but when i implemented i’m getting this error-

TypeError: $(…).wpColorPicker is not a functionCode-

function sam()
{
wp_enqueue_style( 'wp-color-picker');
wp_enqueue_script( 'wp-color-picker');
}
add_action( 'admin_enqueue_scripts', 'sam' );


<!--HTML-->

<input type="text" value="#bada55" class="ir" />

<!--SCRIPT-->

 <script type="text/javascript">
        jQuery(document).ready(function($){
    $('.ir').wpColorPicker();
});
        </script>

Why am I getting this error any clue? where am I making wrong?

This is happening because you are calling wpColorPicker function before loading wp-color-picker script so to overcome this situation call wpColorPicker() function after loading wp-color-picker script by adding following script in js file in this example i have added it in wp-color-picker-script.js.

jQuery(document).ready(function($){
    $('.ir').wpColorPicker();
});

and then enqueue it using admin_enqueue_scripts action after enqueuing wp-color-picker script and add wp-color-picker as a dependency for it as shown in the following code.

add_action( 'admin_enqueue_scripts', 'wp_enqueue_color_picker' );
function wp_enqueue_color_picker( $hook_suffix ) {
    wp_enqueue_style( 'wp-color-picker' );
    wp_enqueue_script( 'wp-color-picker');
    wp_enqueue_script( 'wp-color-picker-script-handle', plugins_url('wp-color-picker-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
}