Question

如果我想在HTML或jquery函数中使用jscolor.js，但单击按钮后无法使用

 $(document).ready(function() {
 
   
      $('#click').click(function () {
		  					  
                $("#placeholder").html("<input class=jscolor value=714BAB>"); 
       });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="jscolor" value="714BAB">
	<div id="placeholder"></div>
	<button id="click">click</button>

它可以html格式工作，但单击按钮后无法使用

Answer 1

尝试一下

我所做的是通过添加jscolor.installByClassName("jscolor");

重新初始化jscolor。

运行该代码段并亲自查看。

$(document).ready(function() {
    $('#click').click(function () {
        
        $("#placeholder").html("<input class='jscolor' value='714BAB'>"); 
        jscolor.installByClassName("jscolor");
       });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
Color: <input class="jscolor" value="714BAB">
    <div id="placeholder"></div>
    <button id="click">click</button>

Answer 2

您可以创建元素并像这样动态地添加它。您可以使用fromString方法设置正确的颜色。

$(document).ready(function() {
  $('#click').click(function() {
    var input = document.createElement('INPUT');
    var picker = new jscolor(input);
    picker.fromString('714BAB');
    $("#placeholder").empty().append(input);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
Color: <input class="jscolor" value="714BAB">
<div id="placeholder"></div>
<button id="click">click</button>

单击按钮后使用jscolor.js

2 个答案: