CODEWITHSUNDEEP
javascriptjqueryhtml
Hook
Hook

Reputation: 391

Trouble with Jquery ColorPicker

im using jQuery ColorPicker and i want to have a button that adds input to get more than one color, im doing this:

<script>
    $(document).ready(function(){
        $("#btn1").click(function(){
            $(".test").prepend('<input type="text" id="colorpicker-" value=""><br>');
        });
    });
</script>
<div class="test"></div>
<button id="btn1">Append text</button>

but when i click the button the little button on the right that show the popup is not showing...

if i put <input type="text" id="colorpicker-full" value="fe9810"> works normally with the popup button...

Why is not working when I'm adding new inputs?

Thanks!

Upvotes: 0

Views: 75

Answers (3)

Yagnesh bhalala
Yagnesh bhalala

Reputation: 1315

Only 2 Steps to add this one.
1] Add color JS file at given Download option

2] <script src="jscolor.js"></script>
   Color: <input class="jscolor" value="ab2567">

Download demo

Upvotes: 0

Carlos Mayo
Carlos Mayo

Reputation: 2124

I have updated your JSFiddle here. Basically you need to set a new id for each input added. You can't set two or more tags with the same id. And after new input insert you need to call .colorpicker again for the new input tag.

The result code would be like this:

$(document).ready(function(){
    $("#btn1").click(function(){
        var newid=$(".test input").length;
        $(".test").prepend('<input type="text" id="colorpicker-'+newid+'" value=""><br>');
        $('#colorpicker-'+newid).colorpicker({
         parts:          'full',
         alpha:          true,
         showOn:         'both',
         buttonColorize: true,
         showNoneButton: true
        });
     });
});

Upvotes: 1

Fran Arjona
Fran Arjona

Reputation: 118

I haven't seen your call to colorpicker, but I will suppose you are calling it once when the document is ready.

Because you are dynamically adding the elements with prepend, these new inputs are not bound to colorpicker (called onload) and it looks is not able to check it after that. So you should call it again inside.

You can do it in the way you were trying and you should call colorpicker to refresh it:

http://jsfiddle.net/LoLzoLyw/

$("#btn1").on('click', function(){

    $('<input type="text" id="your-id" class="colorpicker-full" value="fe9810"><br>').prependTo('.test');

    $('.colorpicker-full').colorpicker();

});

Or if you ask me, I think the best way is adding the input into the DOM dynamically (and also calling colorpicker):

http://jsfiddle.net/ud0a8cqa/2/

$("#btn1").on('click', function(){

    $("<br>").prependTo('.test');

    $('<input>').attr({
        type: 'text',
        id: 'your-id',
        class: 'colorpicker-full',
        value: 'fe9810'
    }).prependTo('.test').colorpicker();

});

By the way, I prefer to have this kind of jQuery elements in a common class instead of call them by ID.

Upvotes: 1

Related Questions