user2301515 user2301515 - 5 days ago 7
HTML Question

jscolor in a generated form after a button click

I want to use a jscolor for color input http://jscolor.com/, but i cannot use the plugin in a javascript generated form while clicking a button, if i need:

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


Javascript:

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


but this doesn't work:

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


Javascript..

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

Answer

After a quick review of the jscolor JS file, you need to call jscolor function if you want to dynamically append the color picker to an element :

$(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>

Comments