optionタグをクリックして発火させたい関数があるときeventバインディングを使う（KnockoutJSを用いて)

割とよくやってしまう（いや結構少ないかもだけど・・・）と思われるポカをやってしまったので忘れないうちにメモ。

selectタグ中のoptionタグをクリックしたら実行される関数をknockoutでバインディングしたいと思ったら、eventバインディングを使う。

ok.html

<select data-bind="event : $root.hoge">
    <option>hoge</option>
    <option>fuga</option>
</select>

間違っても以下のようにしてはいけない。

bad.html

<select>
    <option data-bind="click : $root.hoge">hoge</option>
    <option data-bind="click : $root.hoge">fuga</option>
</select>

これでも実はちゃんと動くブラウザがある。IEとfirefoxは動いてしまう。ところがChromeでは動かないのである。
どうやらChromeはoptionタグにclickイベントを付けられないようだ（ちゃんと調べてないけど上のが動かなかったから少なくとも何か邪魔をしてくれるのだろう）。

ので、eventバインディングを使って発火させるようにしましょう。同じ関数名を書かない分こちらの方がスマートで良いとも思われます。