Question

我正在使用jQuery ColorPicker，我希望有一个按钮添加输入以获得多种颜色，我这样做：

txt = 'A      AGILENT TECH INC              \nAA     ALCOA INC                     '
# First create a list , each element in the list represents new line
# at the same step replace the first occurrences of `spaces` with '__'
lines = [re.sub('\s+' , '__' , line.strip() , 1) for line in txt.split('\n')]
# 
Out[143]:
['A__AGILENT TECH INC', 'AA__ALCOA INC']
# then create a series of all resulting lines 
S = pd.Series(lines)

Out[144]:
0    A__AGILENT TECH INC
1          AA__ALCOA INC
dtype: object
# split on `__` which replaced the first occurrences of `spaces` before and then convert the series to a list
data = S.str.split('__').tolist()
Out[145]:
[['A', 'AGILENT TECH INC'], ['AA', 'ALCOA INC']]
pd.DataFrame( data, columns = ['col1' , 'col2'])
Out[142]:
col1    col2
0   A   AGILENT TECH INC
1   AA  ALCOA INC

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

如果我使用弹出按钮放置<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>正常工作......

为什么在我添加新输入时无效？

谢谢！

Answer 1

我没有看到你对colorpicker的调用，但是当文档准备就绪时我会假设你正在调用它。

因为你是动态添加带前置的元素，所以这些新输入没有绑定到colorpicker（称为onload），看起来它之后无法检查它。所以你应该在里面再次调用它。

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

http://jsfiddle.net/LoLzoLyw/

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

    $('<input type="text" id="your-id" class="colorpicker-full" value="fe9810"><br>').prependTo('.test');

    $('.colorpicker-full').colorpicker();

});

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

http://jsfiddle.net/ud0a8cqa/2/

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

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

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

});

顺便说一句，我更喜欢在公共类中使用这种jQuery元素，而不是通过ID调用它们。

Answer 2

我已更新您的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
        });
     });
});

Answer 3

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

Download demo

Jquery ColorPicker的问题

3 个答案: