2016-12-26 11 views
0

imはカラーピッカーjqueryプラグインを使用しようとしています。ここ enter image description here それを初期化するために私のコードです:ここ では、JavaScriptファイルのスクリーンショットがあり、ここでTypeError:jQuery(...)。hexColorPickerは関数ではありません

<script type="text/javascript"> 
     jQuery(function(){ 
      jQuery("#color-picker1").hexColorPicker(); 
     }); 
    </script> 

はそれをトリガーするhtml要素である:

<input type="text" id="color-picker1" class="form-control" /> 

が、プラグインのdoesntのショー。それはコンソールログを結果:

TypeError: jQuery(...).hexColorPicker is not a function

スクリプトの配置:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> 
    <script src="<?php echo base_url()?>assets/color_picker/src/jquery-hex-colorpicker.min.js"></script> <!-- color picker plugin--> 
    <link rel="stylesheet" href="<?php echo base_url()?>assets/color_picker/css/jquery-hex-colorpicker.css" /> <!-- color picker plugin--> 
+0

が欠落し、プラグインファイルはjQueryの後に、それを使用する前に含まれていますか? – Tushar

+0

おそらく、スクリプトの配置を移動する必要があります。このエラーは、関数がロードされる前に関数を呼び出すと、典型的です。 –

+0

jqueryライブラリをDOM htmlのheadタグに含めましたか? –

答えて

0

は、スクリプトの配置が続く限りていることを確認し、それがロードされた後、あなたは、六角カラーピッカーを初期化していることを確認します、また;<?php echo base_url();?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> 
<script src="<?php echo base_url();?>assets/color_picker/src/jquery-hex-colorpicker.min.js"></script> <!-- color picker plugin--> 
<link rel="stylesheet" href="<?php echo base_url();?>assets/color_picker/css/jquery-hex-colorpicker.css" /> <!-- color picker plugin--> 

<script type="text/javascript"> 
    jQuery(function(){ 
     jQuery("#color-picker1").hexColorPicker(); 
    }); 
</script> 
関連する問題