Почему событие изменения не запускается на selector.val (1234)?

Возможный дубликат:
текстовое поле jQuery. val ('xxxx') не вызывает изменение?

У меня есть подключаемый модуль, который должен срабатывать при обновлении значения «селектора». Во время обычного взаимодействия с пользовательским интерфейсом он работает как чемпион. Однако он не срабатывает, если «селектор» обновляется через JavaScript или jQuery.

  • Обновите прямо через текстовое поле ... работает.
  • Нажмите кнопку ... не работает.
  • Обновление с помощью jQuery-вызова selected.val (xxx) ... сбой.

Общая идея плагина состоит в том, чтобы автоматически округлять итоги в таких объектах, как сетки, панели и т. Д.

Любая помощь была бы замечательной ... Я боролся с этим весь день!

Учитывая следующий 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);

person Prisoner ZERO    schedule 24.03.2011    source источник


Ответы (4)


Насколько я знаю, так оно и есть. Событие change не запускается при изменении значения из JavaScript. Заставить его запустить легко (с помощью jQuery):

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

Это запустит все change обработчики событий для этого элемента.

person Felix    schedule 24.03.2011

jQuery не запускает события, когда текстовое поле обновляется с помощью .val()

Попробуйте вручную запустить событие после изменения значения:

jQuery('#myDecimalTotal').val(777).trigger('change');
person Rocket Hazmat    schedule 24.03.2011

Это ограничение браузера при обработке событий, но вы можете объявить собственное событие и установить прослушиватель для своего события. Все, что вам нужно сделать, это запустить ваше мероприятие, когда оно действительно необходимо.

//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');
person Johnner    schedule 24.03.2011

Вот скрипка, показывающая, как вы можете использовать запускающее изменение, чтобы ваши числа обновлялись должным образом.

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

Исправлена ​​ссылка

person Patricia    schedule 24.03.2011
comment
Мне жаль, но пример скрипки, похоже, не работает. - person Prisoner ZERO; 24.03.2011
comment
странно ... похоже не сохранилась последняя версия. Извини за это! - person Patricia; 25.03.2011
comment
ааа, так намного лучше. - person Patricia; 25.03.2011