input/select/textarea等の要素の中身が変更された時に実行されるメソッド。
実際の挙動
<input type="radio" name="test">
<input type="radio" name="test">
<input type="radio" name="test">
上記のようなラジオボタンがあった時にchange()を使用することで、いずれかのラジオボタンがクリックされた瞬間に何らかのイベント処理を自動的に実行することが出来るわけです。
他にも、セレクトボックスから任意の項目を選択した時や、入力ボックスに文字が入力されてフォーカスが外れた瞬間に実行することも可能です。
<body>
<select>
<option>おはよう</option>
<option>こんにちは</option>
<option>こんばんは</option>
</select>
<script>
$('select').change(function() {
var text = $('option:selected').text();
console.log( text );
});
</script>
</body>
上記のコードはラジオボタンがクリックされた時に任意のイベントが発生するようになっています。
$('select').change(function() {
var text = $('option:selected').text();
console.log( text );
});
こちらのコードではラジオボタンが選択された時に任意のテキストを表示されるようになっています。
changeイベントの発生方法
<body>
<input type="text">
<button>ボタン</button>
<script>
$('input').change(function() {
console.log('変更されました！');
});
$('button').click(function() {
$('input').change();
})
</script>
</body>
change()の引数を無しにするとchange()イベントを意図的に発生させることができます。
上記のサンプルコードだとボタンをクリックした後にchange()イベントが発生されるようになっておりコンソールログには変更されました！の文字が表示されるようになっています。
changeイベントが発生しない場合
<body>
<input type="text">
<button>ボタン</button>
<script>
$('input').change(function() {
console.log('変更されました！');
});
$('button').click(function() {
$('input').val('こんにちは');
})
</script>
</body>
上記のようにクリック時にテキストボックスにval()で文字列を代入させても、コンソールログには変更されました！とは表示されません。
実はテキストボックスはval()で文字列を代入してもchange()イベントが動作しない仕様になっています。
そこで引数なしのchange()を使用することで、この問題を解決することができます。
$('button').click(function() {
$('input').val('こんにちは').change();
})
これで無事に動くようになりました。