javascript - Jquery ColorPicker 的问题

Question

我正在使用jQuery ColorPicker我想要一个按钮来添加输入以获得多种颜色，我正在这样做:

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

但是当我单击该按钮时，右侧显示弹出窗口的小按钮未显示...

如果我输入 <input type="text" id="colorpicker-full" value="fe9810">使用弹出按钮可以正常工作...

为什么当我添加新输入时不起作用？

谢谢!

Answer 1

我已经更新了你的 JSFiddle here 。基本上你需要为每个添加的输入设置一个新的 id。您不能设置两个或多个具有相同 id 的标签。在新输入插入后，您需要再次调用 .colorpicker 以获取新输入标记。

结果代码如下:

$(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
        });
     });
});