web-dev-qa-db-ja.com

val（）がjQueryのchange（）をトリガーしない

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

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

jquerytriggers
310
Ergec

onchangeは、ユーザーが入力を入力してから入力がフォーカスを失った場合にのみ発生します。

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

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

別の方法として、 trigger イベントを使って次のことができます。

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

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

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

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

元の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);

実用的な例： こちら

（val(new_val)が実際に変更されていなくても呼び出されると、これは常にchangeを起動することに注意してください。）

値が実際に変更されたときにのみ変更をトリガーしたい場合は、これを使用してください。

//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/

27
Yaron U.

このようにメソッドを連鎖させる必要があります。

$('#input').val('test').change();
15
Timothy Gonzalez

いいえ、値を設定した後に手動でトリガする必要があるかもしれません。

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

または

$('#mytext').trigger('change');
13
Darin Dimitrov

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

$("#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')を呼び出しました。

8
Jay Godse

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

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

1
Sky Yip

Feb 2019現在、.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">
1
cieunteung

私はこれが古いスレッドであることを知っています、しかし見ている他の人たちにとって、上記の解決策はおそらくchangeイベントをチェックする代わりにinputイベントをチェックする代わりに以下と同じくらい良くないです。

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