Question

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

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

直接通过文本框更新... 可以。
按下按钮... 失败。
使用对selected.val（xxx）的jQuery调用进行更新... 失败。

插件的一般想法是在网格和面板等内容中自动舍入总计。

任何帮助都会很棒......我整天都在努力挣扎!!

鉴于以下HTML：

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

使用以下选择器和JavaScript进行测试：

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

对于以下插件：

(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事件处理程序。

Answer 2

使用.val()

更新文本框时，jQuery不会触发事件

尝试在更改值后手动触发事件：

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

Answer 3

这是一个小提示，显示如何使用触发更改来使您的数字正确更新

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

修正了链接

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

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

4 个答案: