こんにちは、なかわけです。
タイトルのことをしようとすると以下のようなコードになると思います。
HTML
<input type="radio" name="sweets" value="1"/> チョコレート <input type="radio" name="sweets" value="2"/> チョコラーテ <input type="radio" name="sweets" value="3"/> ショコラ
Java Script
$(function(){
//ラジオボタンにchangeイベントを結びつける
$('input').change(function(){
console.log('Buono!');
});
//ラジオボタンのひとつ目をクリック
$('input:first').click();
});
このままでもラジオボタンのひとつ目は選択されますが、
Buono!は出力されません。
これを以下のように変更するとBuono!も出力されてラジオボタンのひとつ目も選択されます。
Java Script
$(function(){
//ラジオボタンにchangeイベントを結びつける
$('input').change(function(){
console.log('Buono!');
});
//ラジオボタンのひとつ目をクリック :ここを変更!
$('input').get(0).click();
});
はい、これで期待した挙動にはなりましたが、なぜでしょう？
なぜなぜ？
:firstとget(0)の挙動の違いなんでしょうけど、私にはわかりません・・・。
理由がわかる方コメントいただけると助かります。
Tags: JavaScript, jQuery
残念ながら、jQueryの.click()トリガーでchangeイベントが発生しない理由についての根拠は私も分かりませんでした。
しかし、:firstとget(0)は全く違うものです。
$(‘input:first’)：inputにマッチするものの一番最初の”jQueryオブジェクト”
$(‘input’).get(0)：inputにマッチしたjQueryオブジェクトを”DOMオブジェクトに還元したもの”の0番目
になります。
:firstはjQueryオブジェクトをフィルターするセレクタですが、
.get()はjQueryオブジェクトをDOMオブジェクトに戻す機能です。
ですので、
$(‘input’).get(0).click();
は、.get(0)以降の処理は、通常のJavaScriptの処理になります。
従って、.get(0)の後ろの.click()は通常のJavaScriptのClickトリガーということになります。
以上を踏まえて、後者だけがうまく動いたのは、
「通常のJavaScriptのClickトリガーだったからChangeイベントも発生した」、ととらえると、
jQueryのClickトリガーはClickイベントのみを発生させるものなのかも知れません。
これが正しいかは分からないのですが、こちらで試した限りは、
$(‘input:first’).click().change()
とすると想定通りの動きをすると思います。
エスケイさん、
丁寧に解説いただきありがとうございました！
というのがおおよそ正しい解ですね。
しかし、
というネイティヴjsとjQueryでそんな差もあるのかぁと、驚きというか、落胆というか・・・。
まだまだjsにハマり続ける日が続きそうです。