ボタンで値を変更したときにテキストボックスでchange
イベントをトリガーしようとしていますが、うまくいきません。チェック このフィドル 。
テキストボックスに何かを入力して別の場所をクリックすると、change
が起動されます。ただし、ボタンをクリックした場合、テキストボックスの値は変更されますが、change
はトリガーされません。どうして?
onchange
は、ユーザーが入力を入力してから入力がフォーカスを失った場合にのみ発生します。
値を設定した後で、onchange
イベントを手動で呼び出すことができます。
$("#mytext").change(); // someObject.onchange(); in standard JS
別の方法として、 trigger イベントを使って次のことができます。
$("#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);
実用的な例: こちら
(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/
このようにメソッドを連鎖させる必要があります。
$('#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')
を呼び出しました。
https://api.jquery.com/change/ から:
change
イベントは、値が変更されたときに要素に送信されます。このイベントは<input>
要素、<textarea>
ボックス、および<select>
要素に制限されています。選択ボックス、チェックボックス、およびラジオボタンの場合、ユーザーがマウスで選択するとイベントがすぐに発生しますが、他の要素タイプの場合、イベントは要素がフォーカスを失うまで延期されます。
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">
私はこれが古いスレッドであることを知っています、しかし見ている他の人たちにとって、上記の解決策はおそらくchange
イベントをチェックする代わりにinput
イベントをチェックする代わりに以下と同じくらい良くないです。
$("#myInput").on("input", function() {
// Print entered value in a div box
$("#result").text($(this).val());
});