title: Jquery color picker binding handler creates multiple divs
body: <p>I am trying to use this jquery <a href="http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/" rel="nofollow noreferrer">color picker</a> with knockout.js. I have written custom banding handler to bind colorpicker input control with my viewModel color value. </p>
  
  <p>Here is the Binding Handler code:</p>
  
  <pre><code>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);        
  }
  </code></pre>
  
  <p>and HTML :</p>
  
  <pre><code> &lt;input type="text" data-bind="colorPicker: newEvent().color, colorPickerOptions: { value:newEvent().color }"/&gt;
  </code></pre>
  
  <p>Problem is that when I change the color it creates the multiple divs each time when I change the color as shown in image. </p>
  
  <p><img src="https://i.stack.imgur.com/WjsiC.png" alt="enter image description here"></p>
  
  <p>Can anyone please identiy whats the problem in my code??</p>