web-dev-qa-db-ja.com

プログラムで入力値が変更されたときにJQuery変更イベントを発生させる方法は?

入力テキストがプログラムで変更されたときに、たとえば次のようにJQuery changeイベントを発生させます。

$("input").change(function(){
    console.log("Input text changed!");
});
$("input").val("A");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />

しかし、それは機能しません。どうすればこの作品を作ることができますか?

31
Mohammad

changeイベントは、ユーザーが入力を入力し、フォーカスを失ったときにのみ発生します。

change()またはを使用して、イベントを手動でトリガーする必要があります trigger('change')

$("input").change(function() {
  console.log("Input text changed!");
});
$("input").val("A").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' />
38
Pranav C Balan

イベントハンドラー.change()は、フォーム送信のように動作します-基本的に、送信時に値が変更されると、コンソールはログに記録します。テキスト入力で動作するには、次のような入力を使用します。

$("input").on('input', function(){
    console.log("Input text changed!");
});
$("input").val("A");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' />
5
kawnah

あなたがする必要があるのは、テキストを設定した後にchangeイベントをトリガーすることです。したがって、次のように、テキストを更新する必要があるたびにそれを繰り返す必要がないように、それを行う関数を作成できます。

function changeTextProgrammatically(value) {
    $("input").val( value );
    $("input").trigger( 'change' ); // Triggers the change event
}

changeTextProgrammatically( "A" );

fiddle を更新しました。

DOMSubtreeModifiedイベントを使用できます:

$('input').bind('DOMSubtreeModified',function(){...})

bothユーザーとコードの変更を実行する場合:

$('input').bind('input DOMSubtreeModified',function(){...})

このイベントは非推奨としてマークされ、時にはかなりのCPU時間を消費しますが、慎重に使用すると非常に効率的な場合もあります...

0
Dr Fred

jquery changeイベントは、ユーザーが入力を入力してからフォーカスを失ったときにのみ機能します。そのため、次の回避策を使用してこれを実行できます。 (これはボタンではなく他のものでも構いません)

var original_value = $('input').val();
$('button').click(function(){
var new_value = $('input').val();
if(original_value != new_value ){
   //do something
  }
//now set the original value to changed value (in case this is going to change again programatically)
original_value = new_value;
})
0
Arun Kumar