爲什麼不在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');