Javascript jQuery colorpicker不处理添加的元素

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

滑动框内有一个颜色选择器，在初学者小部件上，颜色选择器工作正常，但在添加的小部件中，颜色选择器不工作

看这把小提琴：

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

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

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


});

---

您需要一个“活动”选择器来匹配运行时添加的元素，选中专用函数中的spectrum init，将其稍微更改为选择器以获取所有非init元素，然后在gridster.add\u小部件之后调用此函数

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

---

jQuery是否加载到您的页面中。？？？是它的新版本吗。。？？？在其他依赖js之前是否包含？@DipeshParmar我不太清楚你的意思？但正如您所看到的，jQuery已经加载，并且颜色选择器从一开始就在两个小部件上工作。我不明白最后一个问题？对你有用吗？是的部分。。。如上所述。选中，但颜色选择器在新添加的widgetstry上不起作用，这将有所帮助..添加“live”选择器，您将如何操作以及在何处操作？在

$（“.flatplate”）.spectrum（{

或

函数更新背景（颜色）{

上，据我所知，没有'elementCreated'事件，因此您可以将对函数的调用添加到创建小部件的同一个函数中，或者尝试像$（.flatplate）这样的'deprecated'live。live（'mouseenter'，function（）{$（this）.spectrum（）；}；）。live已被弃用，在这里，它将在每次单击时调用spectrum init，在执行其工作之前，您比插件检查init幸运。感谢这一点，所以现在它是最新的。这种方法适用于较小的应用程序，但在较大的应用程序中会很快变得混乱。您必须始终记住在将组件放置在屏幕上时初始化组件.有没有更好的方法？如果检测到类，会自动初始化？