hidden input change event

Question

How can I detect a change of the value of a hidden input? I've already tried these approaches without success:

$('#id_inpout').live('change',function () {
        var id_el = $(this).attr('id');
        alert(id_el);
    });

and

$('#id_inpout').change(function () {
        var id_el = $(this).attr('id');
        alert(id_el);
    });

and

$('#id_inpout').bind('change',function () {
        var id_el = $(this).attr('id');
        alert(id_el);
    });

Answer 1

As was said in duplicates, and as you saw, changes done in javascript don't trigger the change event.

As I didn't find acceptable answers in the duplicates (that is answers not involving a change in the way the hidden value is set), and supposing you really need that (that is you can't call your function when you change the hidden input val), here's what you might do :

function survey(selector, callback) {
   var input = $(selector);
   var oldvalue = input.val();
   setInterval(function(){
      if (input.val()!=oldvalue){
          oldvalue = input.val();
          callback();
      }
   }, 100);
}
survey('#id_inpout', function(){console.log('changed')}); 

But I would preferably use a more direct solutions (i.e. call a function when you change the hidden input value). This function might be a simple event dispatcher of your own (basically an object wrapping a list of functions to call when it's called).

EDIT: It's now 2015 and for people wondering, no, none of the recent advances of the web world solve that problem. Mutation observers don't observe the value property of the input (it's not really the DOM) and ES6 object observer are powerless for those native objects too.

Answer 2

You could also use trigger('change') after you assign new value to the hidden input:

$('#hidden_input').val('new_value').trigger('change');