jQuery colorpicker无法与Ajax一起使用

Question

I've an input field in my backend where I use a jQuery colorpicker to make it easier for users to get the hex value of a color. It's working good so far.

But, as the inputfields are created with ajax, I need to get to them with an 'jQuery ajax call'.

For some reasons this gives me a javascript error 'TypeError: undefined is not an object (evaluating 'pos.top')' in the colorpicer lib js file.

Without asking you to grab thought the asset lib, is someone able to point me in the right direction as to why this error arises? I mean the calls are pretty similar, aren't they? What am I missing?

Here's my code.

Working version (after saving the page):

jQuery('.ci-js-colorpicker').click(function(){  }).ColorPicker();

Not working version (with jQuery ajax call):

jQuery(document).on('click','.ci-js-colorpicker',function(){  }).ColorPicker();

I've removed parts of the code in the function to make it easier to read. The jQuery colorpicker lib I'm using is: http://www.eyecon.ro/colorpicker/

Answer 1

Try doing:

$(document).on('click', '.ci-js-colorpicker', function () {
  $('.ci-js-colorpicker').colorpicker();
});

If you are displaying it in a modal, maybe you want to make the horror of:

.colorpicker-visible {z-index: 9999;}