Javascript 我无法在输入字段上应用颜色选择器js（jscolor.js）_Javascript_Jquery_Html

Javascript 我无法在输入字段上应用颜色选择器js（jscolor.js）

javascript jquery html

Javascript 我无法在输入字段上应用颜色选择器js（jscolor.js）,javascript,jquery,html,Javascript,Jquery,Html,下面是我的代码html代码 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="jscolor-2.0.4/jscolor.js"></script> <body> <script> $(d

下面是我的代码html代码

   <head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="jscolor-2.0.4/jscolor.js"></script>
      <body>

        <script>
      $(document).ready(function() {
      var max_fields      = 10; 
       var wrapper         = $(".input_fields_wrap");
          var add_button      = $(".add_field_button"); 

       var x = 1; 
         $(add_button).click(function(e){ 
         e.preventDefault();
          if(x < max_fields){ 
        x++; 
        $(wrapper).append('<div>Case :<input type="text" name="mytext"> Color Picker :  <input class="jscolor" name="c_picker"><br><a href="#" class="remove_field">Remove</a></div>');
    }
});

$(wrapper).on("click",".remove_field", function(e){ 
    e.preventDefault(); $(this).parent('div').remove(); x--;
})
  });
  </script>


        <form>
    DB-URl  :
    <input type="text" name="firstname"><br/>
      Username:
    <input type="text" name="lastname"><br/>
    Password:
   <input type="password" name="Password"><br>
    Table Name:
    <input type="text" name="t_name"><br>
    Color column:
   <input type="text" name="c_column"><br>
  <div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div>Case :<input type="text" name="mytext">  Color Picker :  <input  class="jscolor" name="c_picker"><br></div>
      </div>
   <input type="submit" value="Update" id="updating">  
 </form>


$（文档）.ready（函数（）{
var max_字段=10；
变量包装=$（“.input_fields_wrap”）；
var add_button=$（“.add_field_button”）；
var x=1；
$（添加按钮）。单击（函数（e）{
e、 预防默认值（）；
如果（x'）；
}
});
$（包装器）。在（“单击”、“.remove_字段”上，函数（e）{
e、 preventDefault（）；$（this）.parent（'div'）.remove（）；x--；
})
});
数据库URl:


用户名：


密码：


表名：


颜色栏：


添加更多字段
案例：颜色选择器：

第一次颜色选择器js应用于输入字段，但当我动态添加更多颜色选择器字段时，颜色选择器js不会应用于下一个输入字段。有人能解释一下为什么会发生这种情况吗？

之所以会发生这种情况，是因为加载文档时创建了日期选择器

如果在加载文档后插入新的HTML元素，则需要为每个新元素指定唯一的ID，并使用以下代码手动附加颜色选择器：

$("#idOfNewElement").colorpicker();

这在stackoverflow问题中得到了解决：

解决办法是增加：

$(document).ready(function() {
  jscolor.installByClassName("jscolor");
});

使用

jscolor（）

绑定新添加的元素：

    $(document).ready(function () {
                var max_fields = 10;
                var wrapper = $(".input_fields_wrap");
                var add_button = $(".add_field_button");

                var x = 1;
                $(add_button).click(function (e) {
                    e.preventDefault();
                    if (x < max_fields) {
                        x++;
                        $(wrapper).append('<div>Case :<input type="text" name="mytext">Color Picker : <input class="jscolor" name="c_picker"><br><a href="#" class="remove_field">Remove</a></div>');
                        var color = new jscolor($(wrapper).find('input.jscolor:last')[0]);
                        //$(wrapper).find('input.jscolor:last').each(function () {
                            //var color = new jscolor($(this)[0]);

                    //});


                    }
                });

                $(wrapper).on("click", ".remove_field", function (e) {
                    e.preventDefault();
                    $(this).parent('div').remove(); x--;
                });
            });

$（文档）.ready（函数（）{
var max_字段=10；
变量包装=$（“.input_fields_wrap”）；
var add_button=$（“.add_field_button”）；
var x=1；
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（x'）；
var color=newjscolor（$（wrapper.find（'input.jscolor:last'）[0]）；
//$（包装器）.find（'input.jscolor:last'）.each（函数（）{
//var color=new jscolor（$（this）[0]）；
//});
}
});
$（包装器）。在（“单击”，“删除”字段）上，函数（e）{
e、 预防默认值（）；
$（this.parent（'div'）.remove（）；x--；
});
});

您可以使用以下方法在添加的输入上初始化jsColor：

new jscolor($('.jscolor').last()[0]);

注意：无需循环所有输入

$（文档）.ready（函数（）{
$（'.add_field_button'）。单击（函数（e）{
e、 预防默认值（）；
$（'form'）.append（'Case:Color Picker:
'）；
新的jscolor（$（'.jscolor'）.last（）[0]）；
});
});

添加更多字段



案例：颜色选择器：

首次在输入字段上应用颜色选择器js
显示此代码无需循环所有输入（这不是一种有效的方法），您可以看到警告无法将jscolor两次链接到同一元素。跳过。
每次您尝试初始化已初始化的输入时，控制台中都会出现…@ZakariaAcharki现在警告已被删除：）谢谢。还有一个帮助…如果我想将输入字段中的值作为RGB而不是六色代码重新运行，该怎么办…这里它返回六色代码查看在或同时获取颜色