2016年12月05日

jQuery デリゲードを使用したボタン機能の変更

開発部だより 第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アプリケーションではかなり有用でしょう。
posted by 開発部OliveDrab at 11:17
開発部だより | コメント(0) | トラックバック(0)
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/444614619

この記事へのトラックバック