javascript - I am not able to apply color picker js(jscolor.js) on input field

Below is my code html code

   <head>

<script src=".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>

First Time color picker js is apply on input field but when I add more color picker field dynamically color picker js is not apply on next input field. Can anybody explain me why this is happening?

Below is my code html code

   <head>

<script src="https://ajax.googleapis./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>

First Time color picker js is apply on input field but when I add more color picker field dynamically color picker js is not apply on next input field. Can anybody explain me why this is happening?

Share Improve this question edited Dec 12, 2016 at 15:27 asked Dec 12, 2016 at 11:42 gaurav singh 1,4161 gold badge16 silver badges27 bronze badges

First Time color picker js is apply on input field show this code – Farkhat Mikhalko Commented Dec 12, 2016 at 11:48

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

You could init the jsColor on the added input using :

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

NOTE : No need to loop through all the inputs.

$(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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

Use jscolor() to bind the newly appended element:

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

This is solved at this stackoverflow question:
using jscolor.js on dynamic input

The solution was to add:

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

This happens because the date picker is created when the document is loaded.

If you insert a new HTML element after the doc is loaded, you will need to assign a unique ID to each new element and attach the color picker manually using this code:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - I am not able to apply color picker js(jscolor.js) on input field - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)