title: Update bootstrap color picker manually
body: <p>I'm using the following color picker on bootstrap:</p>
  
  <p><a href="http://www.eyecon.ro/bootstrap-colorpicker/" rel="nofollow">http://www.eyecon.ro/bootstrap-colorpicker/</a></p>
  
  <p>I'm using the following code the change the background color of an element on the page:</p>
  
  <pre><code>&lt;input type="text" id="mypicker" name="mypicker" value="" class="input-mini color"/&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function() {
          $("#mypicker").val('#ffffff');
  
          $("#mypicker").colorpicker({
              format: 'hex'})
              .on('changeColor', function(event) {
  
                  $('#target').css('background',event.color.toHex());             
              }
          );
      });
  &lt;/script&gt;
  
  &lt;div id="target" style="height:50px;width:50px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It works apart from when I try to manually enter a hex code by typing it in. It just doesn't seem to trigger the update of the color on keyup or even unfocus.</p>
  
  <p>I found a way by editing the src 'update:' to add:</p>
  
  <pre><code>this.element.trigger({
                  type: 'changeColor',
                  color: this.color
              });
  </code></pre>
  
  <p>However, i would have thought there would have been a better way.</p>