Jquery颜色选择器绑定处理程序创建多个div

我试图使用这个jquery 颜色选择器与knockout.js。 我编写了自定义绑定处理程序来将colorpicker输入控件与我的viewModel颜色值绑定。

这是绑定处理程序代码：

ko.bindingHandlers.colorPicker = { init: function (element, valueAccessor, allBindingsAccessor) { //initialize datepicker with some optional options var options = allBindingsAccessor().colorPickerOptions || {}; $(element).colorPicker(options); //handle the field changing ko.utils.registerEventHandler(element, "change", function () { var observable = valueAccessor(); observable($(element).colorPicker("value")); }); //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function () { $(element).colorPicker("destroy"); }); }, update: function (element, valueAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); $(element).colorPicker("value", value); } 

和HTML：

问题是，当我改变颜色时，每次我改变颜色时都会创建多个div，如图所示。

任何人都可以确定我的代码中的问题是什么？

Answer 1

这是jQuery ColorPicker绑定处理程序的更新代码（与knockout.js libraray一起使用）。

 ko.bindingHandlers.jqColorPicker = { init: function (element, valueAccessor, allBindingsAccessor) { // set default value var value = ko.utils.unwrapObservable(valueAccessor()); $(element).val(value); //initialize datepicker with some optional options var options = allBindingsAccessor().colorPickerOptions || {}; $(element).colorPicker(options); //handle the field changing ko.utils.registerEventHandler(element, "change", function () { var observable = valueAccessor(); observable($(element).val()); }); //handle disposal (if KO removes by the template binding) ko.utils.domNodeDisposal.addDisposeCallback(element, function () { $(element).colorPicker("destroy"); }); }, update: function (element, valueAccessor, allBindingsAccessor) { var value = ko.utils.unwrapObservable(valueAccessor()); $(element).val(value); $(element).change(); } }; 

Answer 2

在您的更新代码中，您可以有效地创建新的采集器。

当颜色发生变化时，会调用更新函数，并在那里创建一个新的选择器。 如果你试试’ $（element）.colorPicker（“value”，value）; 在萤火虫中，你会发现它不是一个二传手，而是一个构造者。