why does the jquery change event not trigger though the value of input changed indeedly?

Question

<body>
    <input value="123">
    <button>button</button>
</body>

Js Code(using JQuery 1.2.0):

$(function(){
    $("button").click(function(){
        $("input").val("balabala...");
    });

    $("body").on("change","input",function(){
        alert("change");
        alert($("input").val());
    });
});

Question:
At the beginning, the value of the input is "123".

When I change the text through editing by hands and click other places not the input field, the change event of the input will trigger.

However, when I click the button, which will also change the value of the input, the change event of the input will not work.

Thanks for any help.

See also: http://stackoverflow.com/questions/3179385/val-doesnt-trigger-change-in-jquery — Todd, May 08 '14 at 15:28

score 7 · Accepted Answer · answered May 08 '14 at 15:24

7

The change event is not triggered when changing the value programatically with code, you have to trigger it yourself

$(function(){
    $("button").click(function(){
        $("input").val("balabala...").trigger('change');
    });

    $("body").on("change","input",function(){
        alert("change");
        alert($("input").val());
    });
});

FIDDLE

answered May 08 '14 at 15:24

adeneo

303,455
27
380
377

Ooh, just out of interest, what's the difference between using `.trigger('change')` and `.change()`? – Albzi May 08 '14 at 15:26
@adeneo It works, thanks! – Shaowei Ling May 08 '14 at 15:29
No difference for this case really, jQuery just has a special `trigger()` method that does this, and it accepts more options than just using `.change()` – adeneo May 08 '14 at 15:30
Ahh ok thanks :) @adeneo – Albzi May 08 '14 at 15:31
@BeatAlex Both of methods work, but I do not know the difference in details. – Shaowei Ling May 08 '14 at 15:32

score 1 · Answer 2 · answered May 08 '14 at 15:25

1

JSFiddle

You need to append .change() onto the click function:

$(function(){
    $("button").click(function(){
        $("input").val("balabala...").change();

    });

    $("body").on("change","input",function(){
        alert("change");
        alert($("input").val());
    });
});

answered May 08 '14 at 15:25

Albzi

15,201
5
43
61

1

thanks, it also works. :-) – Shaowei Ling May 08 '14 at 15:44

why does the jquery change event not trigger though the value of input changed indeedly?

2 Answers2

Linked