val（）はjQueryでchange（）をトリガーしません

changeボタンで値を変更したときにテキストボックスでイベントをトリガーしようとしていますが、機能しません。このフィドルを確認してください。

テキストボックスに何かを入力して別の場所をクリックすると、changeトリガーされます。ただし、ボタンをクリックすると、テキストボックスの値は変更されますが、changeトリガーされません。どうして？

onchange ユーザーが入力を入力し、入力がフォーカスを失ったときにのみ発生します。

onchange値を設定した後で、手動でイベントを呼び出すことができます。

$("#mytext").change(); // someObject.onchange(); in standard JS

または、次を使用してイベントをトリガーできます。

$("#mytext").trigger("change");

redsquareの優れた提案から、これはうまく機能します：

$.fn.changeVal = function (v) {
    return this.val(v).trigger("change");
}

$("#my-input").changeVal("Tyrannosaurus Rex");

val元のval関数のプロキシに置き換えることで、変更をトリガーする関数を非常に簡単にオーバーライドできます。

このコードをドキュメントのどこかに追加するだけです（jQueryを読み込んだ後）

(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0)
            $(this).change(); // OR with custom event $(this).trigger('value-changed');
        return result;
    };
})(jQuery);

実際の例：ここ

（これは、値が実際に変更されていなくてもchange、val(new_val)が呼び出されたときに常にトリガーされることに注意してください。）

値が実際に変更されたときにのみ変更をトリガーする場合は、次のように使用します。

//This will trigger "change" event when "val(new_val)" called 
//with value different than the current one
(function($){
    var originalVal = $.fn.val;
    $.fn.val = function(){
        var prev;
        if(arguments.length>0){
            prev = originalVal.apply(this,[]);
        }
        var result =originalVal.apply(this,arguments);
        if(arguments.length>0 && prev!=originalVal.apply(this,[]))
            $(this).change();  // OR with custom event $(this).trigger('value-changed')
        return result;
    };
})(jQuery);

そのライブの例：http : //jsfiddle.net/5fSmx/1/

このようにメソッドをチェーンする必要があります：

$('#input').val('test').change();

値を設定した後で手動でトリガーする必要はありません。

$('#mytext').change();

または：

$('#mytext').trigger('change');

イベントは泡立っていないようです。これを試して：

$("#mybutton").click(function(){
  var oldval=$("#mytext").val();
  $("#mytext").val('Changed by button');
  var newval=$("#mytext").val();
  if (newval != oldval) {
    $("#mytext").trigger('change');
  }
});

これがお役に立てば幸いです。

$("#mytext").trigger('change')古い値を保存せずに単純な古いものを試しましたが.change、値が変わらなくても火災が発生しました。そのため、以前の値を保存し、$("#mytext").trigger('change')変更された場合にのみ呼び出しました。

2019年2月.addEventListener()現在、jQuery .trigger()または.change()では動作しません。Chrome またはFirefoxを使用して以下でテストできます。

txt.addEventListener('input', function() {
  console.log('not called?');
})
$('#txt').val('test').trigger('input');
$('#txt').trigger('input');
$('#txt').change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt">

.dispatchEvent()代わりに使用する必要があります。

txt.addEventListener('input', function() {
  console.log('it works!');
})
$('#txt').val('yes')
txt.dispatchEvent(new Event('input'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="txt">

https://api.jquery.com/change/から：

changeその値が変化したときにイベントが要素に送られます。このイベントは、<input>要素、<textarea>ボックス、<select>要素に限定されています。選択ボックス、チェックボックス、ラジオボタンの場合、ユーザーがマウスで選択を行うとすぐにイベントが発生しますが、他の要素タイプの場合は、要素がフォーカスを失うまでイベントは遅延されます。

私はこれが古いスレッドであることを知っていますが、見ている他の人にとって、上記の解決策はおそらくchangeイベントをチェックするのではなく、イベントをチェックするのではなく、次のようには良くありませんinput。

$("#myInput").on("input", function() {
    // Print entered value in a div box
    $("#result").text($(this).val());
});