为什么不在selector.val（1234）上触发change事件？

Question

可能重复：
jQuery textbox.val('xxxx') not causing change to fire?

我有一个插件，当出现一个“选择”的值更新为火。在正常的UI交互过程中，它就像一个冠军。但是，如果通过JavaScript或jQuery更新“选择器”，则不会触发它。

• 更新直接通过文本框...... 它的工作原理。
• 按下按钮... 失败。
• 使用jQuery调用select.val（xxx）更新... 它失败。

了插件的总体思路是：全面自动汇总等东西网格和面板等

任何帮助将是巨大的......我这个整天一直在努力！

给出下面的HTML：

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); 
} 

对于以下插件：
使用下面的选择器（S）和JavaScript

<input id="myDecimalTotal" type="text" value="0.00" class="rounder-decimal" /> 
<input id="btnDecimalTotalTest" type="button" value="Run Total" /> 

测试

(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); }); 
       } 
      } 

      /// <summary>Rounds a numeric value to the nearest place.</summary> 
      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); 
      } 
      /// <summary>Rounds a numeric value to the nearest place.</summary> 
      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); 
      } 
      /// <summary>Extracts the number.</summary> 
      function extractValue(value) { 
       var numericRegEx = /([\d\.])/g; 

       try { 
        return value.match(numericRegEx).join(''); 
       } 
       catch (error) { 
        return value; 
       } 
      } 
     }); 
    }; 

    /// <summary>Default options.</summary> 
    $.fn.numericRounder.defaults = { onEvent: 'change', factorOf: 10 }; 
})(jQuery); 

Answer 1

据我所知，这就是它的方式。当值从JavaScript更改时，未触发change事件。得到它的火很容易（使用jQuery）：

jQuery('#myDecimalTotal').val(123).change(); 

这将触发该元素的所有change事件处理程序。

jQuery('#myDecimalTotal').val(777).trigger('change'); 

Answer 2

的jQuery不会触发事件让您的数字更新正确

http://jsfiddle.net/dLfmV/3/

固定链接

Answer 3

这里有一个小提琴您展示如何使用触发变化：当一个文本框使用.val()

尝试改变值后手动触发事件更新

Answer 4

它是事件处理中的浏览器限制，但您可以声明自己的事件并为事件设置侦听器。所有你需要做的就是在需要的时候开启你的活动。

//callback function 
function overwriteDecimalTotal() { 
    jQuery('#myDecimalTotal').val(123); 
} 

//add event listener 
jQuery('#myDecimalTotal').bind('changeValue', function() { 
overwriteDecimalTotal(); 
}) 

//trigger your event when needed 
jQuery('#myDecimalTotal').val(777).trigger('changeValue');