单击按钮后生成的表单中的 jscolor

Question

我想使用 jscolor 进行颜色输入 http://jscolor.com/，但我无法在单击按钮时在 javascript 生成的表单中使用该插件，如果我需要的话：

//this works
<script type="text/javascript" src="js/jscolor.js"></script>
<input id="theinput" />

Javascript:

$(document).ready(function() {
    $('#theinput').addClass('jscolor');
});

但这不起作用：

<input id="theinput" />
<button id="thebutton">Add Color Propety</button>

Javascript..

$(document).ready(function() {
    $('#thebutton').click(function() {
        $('#theinput').addClass('jscolor');
    });
});

Answer 1

快速查看jscolor JS文件后，如果要将颜色选择器动态附加到元素，则需要调用jscolor函数：

$(document).ready(function(){
 $('.thebutton').on('click', function(){
  var myColor = new jscolor($('#theinput')[0]);
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<input id="theinput" />
<button class="thebutton">Add Color Propety</button>

单击按钮后生成的表单中的 jscolor

jscolor in a generated form after a button click

html

javascript

jquery

jscolor