Input, onchange event dont fire, when the value is set manually

Question

I want to catch an event on a range slider, even if I press a button and change the value to:

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

http://jsfiddle.net/BaEar/188/

But the "enter" event is not triggered by pressing a button. And the "change" also does not work.

HTML:

<input type="range">
<button>Change</button>
<div id="output"></div>

JavaScript:

$("input").on("input", function() { //Does not fire on button click :(
    $("#output").text($(this).val());
});

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

Anyone with a solution? Thank:)

Answer 1

First change the handler onto use changeas

$("input").on("change", function() { 
    $("#output").text($(this).val());
});

Secondly, manually activate it in the click handler, for example

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

fiddle

Answer 2

, $("input").val(1) $("input").val(1).trigger('input');. input, , .

jsfiddle → http://jsfiddle.net/BaEar/191/

Answer 3

Try the following:

$("input").on("input change", function() {
    $("#output").text($(this).val());
});

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

http://jsfiddle.net/BaEar/192/

Thus, the range slider is usually updated by changing the value. The AmmarCSE solution only starts when a value is set.