Question

我有这些小部件，里面有一个滑动盒子。加载页面时有两个小部件，但您可以添加小部件并再次删除它。

滑动框内部是一个颜色选择器，在启动器小部件上，颜色选择器正常工作，但在添加的小部件中，颜色选择器不起作用。

我认为错误发生在颜色选择器的脚本中？

以下是颜色选择器的脚本：

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

在专用函数中提取你的频谱init，把它改成选择器以获得所有非初始函数，然后在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

你需要一个＆＃34;直播＆＃34;选择器匹配运行时添加的元素，选中http://api.jquery.com/live/

jQuery colorpicker不处理添加的元素

2 个答案: