jquery change not working incase of dynamic value change

Question

In jQuery how can I track onchange event if the value of textbox is changing dynamically from some other event. I tried this but its not working:

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

Answer 1

keyup doesn't cover all natural cases :(

Two cases when change and keyup won't work:

• browser form autocomplete mechanisms
• mouse-performed paste from system clipboard.

Example: form has textbox intended to put an email address into it, and onchange, keyup events are attached to it.

When user starts typing an email address, if e.g. Chrome or Firefox autocomplete box pops up and user clicks one of the options, the box gets filled with the value, focus stays within the textbox (so no change event firing) and no key was pressed (no keyup event). I tried attaching click to the list, but it causes weird behavior in my browser.

Similar with pasting - if mouse is used for pasting (through contextual menu available on right mouse click)), neither keyup nor change events are fired.

Anyone has a complete solution for this, i.e. how to handle actual changes of the value of the input?

Answer 2

I was looking for a solution like this which would trigger without the user needing to leave the element, but which would work for all cases, including those identified by Jakub in his post. I.e.

• Normal typing
• Pasting via mouse
• Autocomplete

I also ideally wanted a jQuery solution as I was using various jQuery selectors etc and didn't want the hassle of "unwrapping" my jQuery objects to get to the DOM element.

I went for a solution using 3 different event triggers - see the comments in the code sample below for why:

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

I expected that using multiple events like this might result in the function being fired multiple times. In my testing in Firebug, that didn't happen. However, I was in the fortunate position of not minding if the function ran "too many" times and so didn't test this particular aspect further (e.g. other browsers).

Answer 3

I agree with Jakub P.

I tried using Jquery to handle a change to file input type of file (to preview uploaded image) but it wouldn't trigger as well as the plain old javascript onchange event.

I changed the way I attached the event handler in the $(document).ready()

from:

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

to:

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

and I get the behavior I hoped for.