jQuery和miniColors - 集色彩

Question

當你在短聲按鍵add new，jQuery的插入新dragrable DIVs與miniColor插件的CONTAINER。但在此DIV中，直到第一次點擊DIV時才能看到miniColor元素。

的jsfiddle示例 - http://jsfiddle.net/ynternet/m7c7e/4/

1. 爲什麼miniColor元素的DIV第一次點擊後顯示？
2. 如何更改背景顏色？
3. 如何更改字體顏色？

HTML

<div id="add" style="background:yellow; width:100px;cursor:pointer"> add new </div> 
<div id="container"> </div> 

jQuery的

function handler() { 
    if ($(this).find("#menu").length) { 
     return; 
    } 
    $('input').miniColors({       
     opacity: true 
    }); 
    var currentIndex = parseInt($(this).css('z-index'), 10); 
    var newIndex = currentIndex + 1; 
    $(this).css('z-index', newIndex); 
} 
$("#add").on({ 
    click: function(e) { 
     var timestamp = Date.now(); 
     var posx = Math.floor(Math.random() * 400); 
     var posy = Math.floor(Math.random() * 400); 
     $('#container').append(function() { 
      return $('<div class="add_to_this" id="' + timestamp + '" style="left:' + posx + 'px; top:' + posy + 'px; cursor:pointer;">Click me, drag, change z-index & color <input type="hidden" name="color" value="#FFCC00" data-opacity=".5" /> </div>').click(handler).draggable({ 
       containment: "#container", 
       scroll: false, 
       cursor: 'lock' 
     }); 
    }); 
    } 
}); 

CSS

#container { 
    width:500px; 
    height:500px; 
    background: palegoldenrod; 
    position: relative; 
    top:20px; 
    left: 100px; 
    padding: 0px; 
    z-index:2; 
} 
.add_to_this { 
    padding:5px; 
    position: absolute; 
    display:inline-block; 
    background: yellowgreen; 
    width:200px; 
    height:70px; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
    user-select: none; 
    -o-user-select: none; 
    z-index:100; 
} 

Answer 1

那是因爲你似乎追加minicolor到div的點擊（處理）功能..

.click(handler); 

要設置在當您單擊DIV被解僱手柄功能minicolor箱..