jQuery colorpicker not working on added elements

Question

I have these widgets with a sliding box inside. There are two widgets when the page is loaded, but you can add a widget and delete it again.

Inside the sliding box is a color picker, and on the starter widgets the color picker works properly, but in the added widgets the color picker doesn't work.

See this fiddle: http://jsfiddle.net/fULQZ/

I think the error is in the script for the color picker?

Here's the script for the color picker:

// Color picker
function updateBackground(color) {
    $(this).parents(".box_header").css("background", color.toHexString());
}


$(function() {


$(".flatPalette").spectrum({
    flat: true,
    showInput: true,
    showPaletteOnly: true,
    showPalette:true,
    maxPaletteSize: 10,
    palette: [
         ['#DDD','#9fd0d3', '#c9a9d1', '#e2a6a5', '#c2d2bd','#9fb2d1', '#dbba97', '#cbefe9', '#e6e8bf'],
        []
    ],
    change: updateBackground
});


});

Answer 1

extract your spectrum init in a dedicated function, change it a bit the selector to get all non init ones, and just call this function after the gridster.add_widget

function addSpectrum(){
    $(".flatPalette:empty").spectrum({ ... }); // :empty will get non init box
};

$('.addbox').on("click", function(){
    gridster.add_widget(' ... ', 2, 1);
    addSpectrum(); // add spectrum on the new box
});

addSpectrum(); // init spectrum on non dynamic box

http://jsfiddle.net/fULQZ/1/

Answer 2

you need a "live" selector to match element added on runtime, check http://api.jquery.com/live/