Search code examples
javascriptcolor-pickerdynamically-generated

Associate an input html element to a color picker dynamically

I'm using Izzy Color Picker.
In order to associate a input with izzy color picker I just have to set the class attribute of the input element to izzyColor and the input's id have to be unique. With javascript I create an input dinamically when I press a boton.

n = n+1;
id = "txtColor" + n;
input = document.createElement("input");
input.setAttribute("class","izzyColor");
input.setAttribute("id",id);

Then, I append the input to a td element in an table, but the little image that appears next to the associated input element doesn't appear. It seems that the problem is only when I create the input with javascript, because if I create the input element with html, it works fine.

When I inspect the html input element created with javascript through the source code, all attributes are set up correctly.

Solution

  • After looking at the source, it looks like you might be able to just call:

    izzyColor();

    It looks like its not namespaced at all. They define it as this.izzyColor = function(){...}, but at that point, I'm pretty sure this is just the window.

    I'm not sure what that's going to do to existing inputs. You might need to do this:

    $('input.izzyColor').removeClass('izzyColor').addClass('izzyExisting');
izzyColor();
$('input.izzyExisting').removeClass('izzyExisting').addClass('izzyColor');

    Let me know how it goes and we can work from there.