文章/答案/技术大牛

发布

社区首页 >问答首页 >我无法在输入字段中应用颜色选择器js(jscolor.js)。

问我无法在输入字段中应用颜色选择器js(jscolor.js)。
EN

Stack Overflow用户

提问于 2016-12-12 11:42:58

回答 4查看 3.9K关注 0票数 4

下面是我的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>

第一次颜色选择器js被应用于输入字段，但是当我添加更多的颜色选择器字段时，颜色选择器js不应用于下一个输入字段。有人能解释一下为什么会这样吗？

javascript

jquery

html

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-12-12 12:06:19

使用jscolor()对新追加的元素进行bind：

    $(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--;
                });
            });

票数 2

Stack Overflow用户

发布于 2016-12-12 12:23:19

您可以使用以下方法在添加的输入中插入jsColor：

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

注意:不需要循环所有输入。

$(document).ready(function() {
  $('.add_field_button').click(function(e){
    e.preventDefault();

    $('form').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>');

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<form>
  <div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <br><br>
    <div>Case :<input type="text" name="mytext">  Color Picker :  <input  class="jscolor" name="c_picker"><br></div>
  </div>  
</form>

票数 3

Stack Overflow用户

发布于 2016-12-12 11:54:39

这个问题在堆栈溢出问题中得到了解决：

using jscolor.js on dynamic input

解决办法是增加：

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41100093

复制

相似问题

问我无法在输入字段中应用颜色选择器js(jscolor.js)。
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我无法在输入字段中应用颜色选择器js(jscolor.js)。EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我无法在输入字段中应用颜色选择器js(jscolor.js)。
EN