Using jscolor.js for dynamic input

Question

I use the color picker http://jscolor.com/

I am trying to attach it to some dynamic inputs, but to no avail. dynamic inputs in terms, when the page loads, the input does not exist, only after the user clicks on something, the input will become available. for example, I have data rows and each row has a different background color. this row of data is loaded using ajax. at the end of each line there is an edit button. by clicking the "Edit" button, an input text box for the clicked row is displayed. I want to call jscolor picker when the user clicks on an input text box. How can i do this?

thanks

Answer 1

For some reason jscolor.init () did not work for me and looked at the code that I called

jscolor.installByClassName ("jscolor");

function.

So...

$(document).ready(function() {
  jscolor.installByClassName("jscolor");
});

Hope this helps

Answer 2

I just had this problem, but, fortunately, it is easy to fix. You need (re) init jscolor after you dynamically create your inputs:

jscolor.init()

Answer 3

<script>
 $(document).on('click', '#myPickerId', function () {
    var obj = $(this)[0];
    if (!obj.hasPicker) {
        var picker = new jscolor.color(obj, {});  //
        obj.hasPicker = true;
        picker.showPicker();
    }
});    
</script>

, Knockout.js 'with, , .