title: jQuery not working if input field is prefilled (toggle clear function)
body: <p>I've found a jQuery script here at <em><a href="https://stackoverflow.com/questions/6258521/clear-icon-inside-input-text">Clear icon inside input text</a></em> which brings a clear-icon inside an input field. It fits perfect in my website. But it's not working, when the input value is prefilled.</p>
  
  <p><em><a href="http://jsbin.com/sejuquta/1/edit" rel="nofollow noreferrer">Demo at jsbin</a></em></p>
  
  <p>I tried several <code>onchange()</code>, <code>change()</code> in additon to <code>mousemove</code> and also replaced in the script itself and the following in html:</p>
  
  <pre><code>&lt;body onLoad="tog(v);"&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function tog(v){return v?'addClass':'removeClass';} 
  
  $(document).on('input', '.clearable', function(){
      $(this)[tog(this.value)]('x');
  }).on('mousemove', '.x', function( e ){
      $(this)[tog(this.offsetWidth-18 &lt; e.clientX-this.getBoundingClientRect().left)]('onX');   
  }).on('click', '.onX', function(){
      $(this).removeClass('x onX').val('');
  });
  </code></pre>
  
  <p>But it did'nt help. Do you have any solution?</p>