麻煩與jQuery ColorPicker的

IM使用jQuery ColorPicker，我想有一個按鈕，增加投入，得到不止一種顏色，即時通訊做這樣的：麻煩與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">作品通常與彈出按鈕...

當我加入新的投入爲什麼不工作？

謝謝！

來源

2015-09-02 Hook

你能發佈jsfiddle.net例子嗎？ – Sheerforce

@sheerforceits我第一次使用這個，不要判斷哈哈一些樣式丟失，但我的問題的想法是在那裏。 http://jsfiddle.net/hood5e4w/ – Hook

@掛鉤：試試這個：http://jsfiddle.net/hood5e4w/1/ – DinoMyte

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

來源

2015-09-02 18:38:35

我還沒有看到您對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調用它們。

來源

2015-09-02 18:29:17

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

來源

2017-11-23 05:31:13

麻煩與jQuery ColorPicker的

回答

相關問題