Question

I am using a plugin called minicolors for jquery link. I am trying to appened a color picker here (in 2 places, a div and table just for testing) with a button click, it seems though that it only works on the second button click, the first simply returning an empty input box.

        <script type="text/javascript">


            function addPicker() {

            $(document).ready( function() {
                            $(".colorpick").miniColors({
                change: function(hex, rgb) {

                    }
                });
            });

                var picker = "<input type= 'text' class='colorpick' size='6' autocomplete='on' maxlength='10' value='' />";

                $("#datatable > tbody").append("<tr><td>"+picker+"</td></tr>");
                $("#testdiv").append(picker);
            }



            </script>
            <div id="testdiv"></div>
            <button onclick =" addPicker();">Button</button>

No Idea why this is not working.

Answer 1

Try :

  $(document).ready( function() {

       $('.addButton').click(function(){
           $("<input type= 'text' class='colorpick' size='6' autocomplete='on' maxlength='10' value='' />").appendTo("#datatable tbody").wrap('<tr><td></td></tr>');

           $('.colorpick').miniColors();
       });

  });​

Live demo : http://jsfiddle.net/hCVpX/12/