jQuery颜色选择器插件

我正在使用jQuery颜色选择器插件

colorSelector元素允许用户选择颜色。选择颜色后，我想将#previewFrame div背景颜色更改为选定的十六进制

我很难做到这一点。#previewFrame颜色不会更改，但#colorSelector背景颜色会更改

   <script type="text/javascript">
    $(document).ready(function () {
        $('#colorSelector').ColorPicker({
            color: '#0000ff',
            onShow: function (colpkr) {
                $(colpkr).fadeIn(500);
                return false;
            },
            onHide: function (colpkr) {
                $(colpkr).fadeOut(500);
                return false;
            },
            onChange: function (hsb, hex, rgb) {
                $('#colorSelector div').css('background-color', '#' + hex);
                $('#previewFrame div').css('background-color', '#' + hex);
            }
        });
    }
    </script>

$（文档）.ready（函数（）{
$（“#colorSelector”）.ColorPicker({
颜色：“#0000ff”，
onShow：函数（colpkr）{
美元（colpkr）.fadeIn（500）；
返回false；
},
onHide:function（colpkr）{
$（colpkr）.淡出（500）；
返回false；
},
onChange：函数（hsb、十六进制、rgb）{
$（'#colorSelector div'）.css（'background-color'，'#'+hex）；
$（'#previewFrame div'）.css（'background-color'，'#'+hex）；
}
});
}

这是提琴

<div id="previewFrame" style="width: 200px; height: 200px; border: 1px solid #000;">
    <div style="background-color: #0000ff"></div>
</div>
<div id="colorSelector">
    <div style="background-color: #0000ff"></div>
</div>

我认为除非您设置内部div的高度/宽度，否则它将不起作用。我已经应用了高度和宽度，但仍然不起作用。下面是我的示例