javascript - 单击按钮后生成的表单中的 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>