開発部だより 第334回
jQueryの「on」メソッドを使用すれば、JavaScriptのイベントバブリングを利用したデリゲートで後から追加したDOM要素にもイベントが適用できて便利です。
今回紹介するのはこのデリゲードを使用したもので、一つのボタンに複数の異なる機能を設定するテクニックです。
下のサンプルはラジオボタンの切り替えによって、ボタンを押したときに違う機能が発動するようにしています。
<script type="text/javascript">
$(document)
.on("change", "input", function() {
$("#input-container").removeClass().addClass($(this).val());
})
.on("click", ".test-a button", function() {
alert("おはようございます")
})
.on("click", ".test-b button", function() {
confirm('今の時間の挨拶は「おはようございます」で良いですか？');
})
.on("click", ".test-c button", function() {
prompt("挨拶の言葉を入力してください。", "おはようございます");
});
</script>
<div id="input-container" class="test-a">
<input type="radio" name="greeting" value="test-a" checked="checked">朝の挨拶
<input type="radio" name="greeting" value="test-b">挨拶の確認
<input type="radio" name="greeting" value="test-c">挨拶を入力
<button>挨拶</button>
</div>
簡単に解説しますと、
・ラジオボタンを押すとにユニークなclassを追加します。
・ボタンを押すと、上位階層のclassに関連付けられたイベントが発動します。
ダイアログを自作のものにする場合は、追加するclassで表示を切り替えるようにします。
機能だけならサンプルのようにデリゲードを使用しなくても実装できますが、このように書けばイベント記述が集中してわかりやすくなりますし、またイベント記述の後に追加したDOMにもイベントが設定できるので、頻繁にDOMを書き直すシングルページWebアプリケーションではかなり有用でしょう。
