using jscolor.js on dynamic input

问题

i'm using color picker from http://jscolor.com/

i'm trying to attach it to some dynamic inputs, but to no avail. dynamic inputs in terms of, on page load the input doesn't exist, only after the user click on something the input will become available. for example, I have a rows of data, and each row has different background color. this row of data are loaded using ajax. at the end of each row, there's an edit button. by clicking the edit button, it will display an input text box for the clicked row. I want to call the jscolor picker when the user clicks on the input text box. how can I do this?

thanks

回答1:

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

jscolor.installByClassName("jscolor");

function.

So...

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

Hope it helps

回答2:

I just had this problem too but luckily it's easy to fix. You need to (re)init jscolor after you have dynamically created your inputs:

jscolor.init()

回答3:

This helped me

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

In my case, the picker control was dynamic because it is inside Knockout.js 'with' statement which hides and recreates the picker when it needs.

来源：https://stackoverflow.com/questions/19693118/using-jscolor-js-on-dynamic-input

标签

jscolor