how to capture change event in input with jquery?

Question

$('input').change(function(){
    alert($(this).val());
});
$('input').val(1);

This dont work. I need capture the change input with JavaScript:-s

Thanks.

Answer 1

Programmatic changes to <input> elements don't cause events. Only user interaction does.

You can do this however:

$('input').val(1).trigger('change');

Answer 2

You have to put those functions inside the "Ready" function. see the fiddle: http://jsfiddle.net/SfjJQ/1/

$(function() {
    $('input').change(function() {
        alert($(this).val());
    });
    $('input').val(1);
    $('input').trigger('change');
});​

keep in mind that your:

$('input').val(1);

initializes the input to have a value of 1.

Of course you could also do this:

$(function() {
    $('input')
        .change(function() {
            alert($(this).val());
        })
        .val(1)
        .trigger('change');
});​

Answer 3

As others have mentioned, .val() does not trigger any events; however, you could add a wrapper function to jQuery that will change the value and trigger the event if wanted:

$( function () {

    //-- new jQuery function
    $.fn.changeVal = function () {
        $.fn.val.apply( this, arguments );
        $( this ).trigger( 'change' );
    };

    //-- your updated code
    $('input').change(function(){
        alert($(this).val());
    });
    $('input').changeVal(1);

} );​

http://jsfiddle.net/bA3V2/