JQuery изменение не работает в случае динамического изменения значения

Question

В jQuery, как я могу отследить событие onchange, если значение текстового поля динамически меняется от какого-либо другого события.Я пробовал это, но это не работает:

$("#txtbox").change(function(){
   alert("change");
});

Answer 1

keyup не охватывает все естественные случаи :(

Два случая, когда change и keyup не будут работать:

• Браузерная форма автозаполнения механизмов
• вставленная мышью вставка из системного буфера обмена.

Пример: форма имеет текстовое поле, предназначенное для ввода адреса электронной почты, и к ней прикрепляются события keyup.

Когда пользователь начинает вводить адрес электронной почты, например, Появляется окно автозаполнения Chrome или Firefox, и пользователь щелкает один из параметров, поле заполняется значением, фокус остается в текстовом поле (поэтому не происходит срабатывание события изменения), и ни одна клавиша не была нажата (событие keyup не было) ). Я пытался прикрепить клик к списку, но это вызывает странное поведение в моем браузере.

Аналогично вставке - если мышь используется для вставки (через контекстное меню, доступное по щелчку правой кнопкой мыши)), события keyup и change не запускаются.

У кого-нибудь есть для этого полное решение, т. Е. Как обрабатывать фактические изменения значения ввода?

Answer 2

Я искал решение, подобное этому, которое вызвало бы , при этом пользователю не нужно было бы оставлять элемент , но которое работало бы для всех случаев, включая случаи, указанные Якубом в его посте. * Т.е. 1003 *

• Обычный набор
• Вставка мышью
• Автозаполнение

В идеале я также хотел получить решение jQuery, поскольку использовал различные селекторы jQuery и т. Д., И не хотел, чтобы хлопот «разворачивания» моих объектов jQuery попадал в элемент DOM.

Я выбрал решение с использованием 3 разных триггеров событий - см. Комментарии в примере кода ниже, чтобы узнать, почему:

var valuechanged = function () {
    // do something
};
var inputtowatch = $('.selector');
inputtowatch.on('input', valuechanged);
inputtowatch.on('keyup', valuechanged); // input event is buggy and doesn't catch delete/backspace in IE, but can't just use keyup alone as that doesn't catch paste and automcomplete
inputtowatch.on('propertychange', valuechanged); // input event not supported in IE < 9

Я ожидал, что использование нескольких подобных событий может привести к многократному запуску функции. В моем тестировании в Firebug этого не произошло. Однако мне повезло, что я не возражал, если функция выполнялась «слишком много раз», и поэтому не проверял этот конкретный аспект дальше (например, в других браузерах).

Answer 3

Я согласен с Якубом П.

Я попытался с помощью Jquery обработать изменение типа ввода файла (для предварительного просмотра загруженного изображения), но оно не сработало так же, как обычное старое событие javascript onchange.

Я изменил способ подключения обработчика событий в $(document).ready()

от

$("#iconImage").bind("change", function(event) {
    ChangeImage("iconImage", "iconImagePreview");
});

до:

var obj = document.getElementById("logoImage");
obj.onchange = function() {
    ChangeImage("logoImage", "#logoImagePreview");
};

и я получаю поведение, на которое надеялся.

Answer 4

Событие change происходит только тогда, когда элемент теряет фокус. Вместо этого используйте событие keyup.