simulate onChange event to fire on HTML input box

Question

I have jQuery that uses the change event from a selection box to update a input box on the form. I need the input box to fire it's change event when I update it's value.

This link on MSDN shows a way to simulate the click event. Is there a technique I can use to simulate a change event?

Answer 1

您可以使用trigger() ：

$('#input-id').trigger('change');

Answer 2

You can trigger change event handler . You can simply call it like that:

jQuery('#my_field').change();

which is a shortcut to:

jQuery('#my_field').trigger('change');

See more on the documentation of .change() (its third, attribute-less variation).

Answer 3

This should theoretically do it:

<input id="textinput" value="somevalue" name="somename" />

<script type="text/javascript">
    function doSomethingOnInputChange(e) {
        console.log('input on change');
    }

    $('#textinput').bind('change', doSomethingOnInputChange);


    $('#textinput').trigger('change');
</script>

It binds an event handler to a custom 'change' event and then fires the event.

Answer 4

There are several good jQuery based answers already (though you didn't use a jQuery tag) but there's another approach that can work for you if you're binding the change event to call a function.

Say you've already bound the change event to the doSomethingOnInputChange function as in Vlad's answer...

Rather than simulating an event by triggering 'change' you can directly call doSomethingOnInputChange - that is, instead of doing:

$('#textinput').trigger('change')

your javascript just makes a call to the same function that gets called anyway when you trigger the event:

doSomethingOnInputChange( ... );

You may or may not want to pass the #textinput DOM element as a parameter in a direct call, or an event parameter (but providing your own event parameter makes this approach hardly worthwhile) -- those depend on what you need to do in the function.