jQuery颜色选择器不能在添加的元素上工作

jQuery colorpicker not working on added elements

本文关键字:元素 工作 添加 颜色 选择器 不能 jQuery      更新时间:2023-09-26

这些小部件里面有一个滑动框。当页面加载时有两个小部件,但是您可以添加一个小部件并再次删除它。

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

查看此提琴:http://jsfiddle.net/fULQZ/

我认为错误是在脚本的颜色选择器?

下面是颜色选择器的脚本:
// 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
});

});

在一个专用函数中提取你的频谱初始化,稍微改变一下选择器以获得所有非初始化的,然后在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/

你需要一个"live"选择器来匹配运行时添加的元素,检查http://api.jquery.com/live/