Q:

jQuery colorpicker not working on added elements

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
});

});

A:

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/

