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

$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
$（“.test”）.prepend（“
”）；
});
});
附加文本

但是当我点击按钮时，右边显示弹出窗口的小按钮没有显示

如果我将

与弹出按钮一起正常工作

为什么在添加新输入时不工作

---

谢谢

我还没有看到您对colorpicker的调用，但我假设您在文档准备好后调用它一次

因为您正在使用prepend动态添加元素，所以这些新输入不会绑定到colorpicker（称为onload），并且在这之后它看起来无法检查它。所以你应该在里面再叫一次

您可以按尝试的方式进行操作，您应该调用colorpicker来刷新它：

$（“#btn1”）。在（'click'，function（）上{
$（“
”）.prependTo（“.test”）；
$（'.colorpicker已满'）.colorpicker（）；
});

或者如果你问我，我认为最好的方法是动态地将输入添加到DOM中（并调用colorpicker）：

$（“#btn1”）。在（'click'，function（）上{
$（“
”）.prependTo（“.test”）；
$（''）.attr({
键入：“文本”，
id:'您的id'，
类：“颜色选择器已满”，
值：'fe9810'
}).prependTo（'.test'）.colorpicker（）；
});

---

顺便说一下，我更喜欢将这种jQuery元素放在一个公共类中，而不是按ID调用它们。

我已经更新了您的JSFIDLE。基本上，您需要为添加的每个输入设置一个新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
        });
     });
});

$（文档）.ready（函数（）{
$（“#btn1”）。单击（函数（）{
var newid=$（“.test input”）.length；
$（“.test”）.prepend（“
”）；
$（'#colorpicker-'+newid）.colorpicker({
部分：'满'，
阿尔法：是的，
showOn:“两者都有”，
纽扣颜色：对，
showNone按钮：true
});
});
});

只需两个步骤即可添加此步骤。
1] 在给定的下载选项中添加彩色JS文件
2] 
颜色：

---

你能发布一个jsfiddle.net的例子吗？@sheerforceit这是我第一次使用它，不要判断哈哈，有些风格缺失了，但我的问题就在这里@胡克：试试这个：

$("#btn1").on('click', function(){

    $("<br>").prependTo('.test');

    $('<input>').attr({
        type: 'text',
        id: 'your-id',
        class: 'colorpicker-full',
        value: 'fe9810'
    }).prependTo('.test').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
        });
     });
});

Only 2 Steps to add this one.
1] Add color JS file at given Download option

2] <script src="jscolor.js"></script>
   Color: <input class="jscolor" value="ab2567">