好きなだけかりんとうを食べる人生

フロントエンドとかデザインとかバックエンドとか浅く広く。社会人3年目のうぇぶでぃれくたーです。

【jQuery】on()メソッド内の関数に引数を渡したい

時って結構多い気がします。

function greet(phrase) {
    console.log(phrase);
}

$("hoge").on("click", greet("おはようございます"));

コードをこう書くと、 ページが読み込まれたタイミングでgreet()が実行される。 これを回避するためには、

1. 無名関数を噛ませる

var phrase = "おはようございます"
$("hoge").on("click", function() {
    console.log(phrase);
});

コレジャナイ感。

2. 第二引数に連想配列(map形式)を指定する

リファレンスには、

.on( events[, selector] [, data], handler(eventObject));

と書いてある。 つまり、

function greet(phrase) {
    console.log(phrase.data.voice);
}

$("hoge").on("click", {voice: "おはようございます"}, greet);

これで大丈夫。 data(連想配列名)を指定してあげることを忘れないように!