jQuery & miniColors - 设置颜色答案

【问题标题】：jQuery & miniColors - set colorjQuery & miniColors - 设置颜色
【发布时间】：2012-10-09 16:34:34
【问题描述】：

当您单击add new 按钮时，jQuery 将带有miniColor 插件的新可拖动DIVs 插入CONTAINER。但是在这个 DIV 中，直到您第一次单击该 DIV，您才能看到 miniColor 元素。

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

为什么在第一次点击 DIV 后显示 miniColor 元素？
如何更改背景颜色？
如何更改字体颜色？

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;
}

【问题讨论】：

标签： jquery background-color color-picker

【解决方案1】：

那是因为您似乎在 click(handler) 函数中将 minicolor 附加到 Div..

.click(handler);

您在句柄函数中设置 minicolor 框，当您单击 div 时会触发该函数。

【讨论】：

谢谢，现在我明白了……我需要在哪里放置 miniColor 声明？