title: Why doesn't the change event fire on selector.val(1234)?
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/2247386/jquery-textbox-valxxxx-not-causing-change-to-fire">jQuery textbox.val(&#39;xxxx&#39;) not causing change to fire?</a>  </p>
  </blockquote>
  
  
  
  <p>I have a plug-in that is supposed to fire when the value of a "selector" is updated.  During normal UI interaction it works like a champ.  However, it doesn't fire if the "selector" is updated via JavaScript or jQuery.</p>
  
  <ul>
  <li>Update directly through the text-box...<strong><em>it works</em></strong>. </li>
  <li>Press the button...<strong><em>it fails</em></strong>.</li>
  <li>Update using a jQuery call to selected.val(xxx)...<strong><em>it fails</em></strong>.</li>
  </ul>
  
  <p>The general idea for the plug-in is to automatically round totals in things like grids and panels etc.</p>
  
  <p>Any help would be great...I've been wrestling with this all day!</p>
  
  <p><strong>Given the following HTML:</strong><br/></p>
  
  <pre><code>&lt;input id="myDecimalTotal" type="text" value="0.00" class="rounder-decimal" /&gt;
  &lt;input id="btnDecimalTotalTest" type="button" value="Run Total" /&gt;
  </code></pre>
  
  <p><strong>Test using the following selector(s) and JavaScript:</strong><br/></p>
  
  <pre><code>jQuery(document).ready(function() {
     jQuery('input.rounder-decimal').numericRounder();
     jQuery('#btnDecimalTotalTest').click(overwriteDecimalTotal);    // fails
     jQuery('#myDecimalTotal').val(777);                             // fails
  });
  
  function overwriteDecimalTotal() {
     jQuery('#myDecimalTotal').val(123);
  }
  </code></pre>
  
  <p><strong>For the following plug-in:</strong><br/></p>
  
  <pre><code>(function($) {
      $.fn.numericRounder = function(options) {
  
          switch (typeof (options)) {
              case 'object':
                  options = $.extend({}, $.fn.numericRounder.defaults, options);
                  break;
              case 'string':
                  options = $.extend({}, $.fn.numericRounder.defaults, { onEvent: options });
                  break;
              default:
                  options = $.fn.numericRounder.defaults;
          }
  
          return this.each(function() {
  
              var element = $(this);
  
              if (element.is('input.rounder-decimal')) {
                  switch (options.onEvent) {
                      case 'change':
                          element.change(roundDecimal);
                          break;
                      case 'blur':
                          element.blur(roundDecimal);
                          break;
                      case 'click':
                          element.click(roundDecimal);
                          break;
                      default:
                          element.blur(roundDecimal);
                  }
              }
  
              if (element.is('input.rounder-wholeNumber')) {
                  switch (options.onEvent) {
                      case 'change':
                          element.change(function() { roundWholeNumber(this, options.factorOf); });
                          break;
                      case 'blur':
                          element.blur(function() { roundWholeNumber(this, options.factorOf); });
                          break;
                      case 'click':
                          element.click(function() { roundWholeNumber(this, options.factorOf); });
                          break;
                      default:
                          element.blur(function() { roundWholeNumber(this, options.factorOf); });
                  }
              }
  
              /// &lt;summary&gt;Rounds a numeric value to the nearest place.&lt;/summary&gt;
              function roundDecimal() {
  
                  var value = $(this).val();
                  value = extractValue(value);
  
                  if (isNaN(value))
                      value = $(this).val();
                  else
                      value = Math.round(value).toFixed(2);
  
                  $(this).val(value);
              }
              /// &lt;summary&gt;Rounds a numeric value to the nearest place.&lt;/summary&gt;
              function roundWholeNumber(element, factorOf) {
  
                  var value = $(element).val();
                  value = extractValue(value);
  
                  if (isNaN(value))
                      value = $(element).val();
                  else
                      value = Math.round(value / factorOf) * factorOf;
  
                  $(element).val(value);
              }
              /// &lt;summary&gt;Extracts the number.&lt;/summary&gt;
              function extractValue(value) {
                  var numericRegEx = /([\d\.])/g;
  
                  try {
                      return value.match(numericRegEx).join('');
                  }
                  catch (error) {
                      return value;
                  }
              }
          });
      };
  
      /// &lt;summary&gt;Default options.&lt;/summary&gt;
      $.fn.numericRounder.defaults = { onEvent: 'change', factorOf: 10 };
  })(jQuery);
  </code></pre>