簡単！要素追加時のクリックイベント登録

2015年07月16日 · jQuery

皆さんもjQueryなどで後から要素を追加し、クリックイベントを発行して、
作り方にもっと工夫できないかなと思ったことはないでしょうか？

また、クリックイベントが２重３重に登録されて動作の制御ができないなど
悩んだことはないでしょうか？

今回は簡単な方法でクリックイベントを追加する方法紹介！
しかも
要素を後か追加してもクリックイベントを発行しなくて良いというちょっと楽な方法です

指定方法

今回の指定方法ですが、スマホ向けの方法となっております。
定義として

$(document).on('touchstart', '.button',function(){
	$(this).addClass("button_down");
});
$(document).on('touchend touchmove', '.button',function(){
	$(this).removeClass("button_down");
});

こちらの説明として
1:「$(document)」をセレクターとして定義をおこないます
2:「.on()」のonイベントでクリックやタッチなどのイベントを登録しておきます。
3:「.on(‘touchstart’, ‘.button’,function(){」続いてonの中身です
通常であれば、「touchstart」だけで登録する方が多いと思うのですがその後に
「.button」任意のクラス名を指定しております。
4:タップした要素に「button_down」というクラスを追加する
という流れになっております。

クラス追加したのでどこかで解除しないといけません。
「’touchend touchmove’, ‘.button’,function()」を次に指定してあげます。
タップから離した場合とタップから移動した場合で
「.button」のクラス名を持つ要素であれば、
「button_down」のクラス名を削除する
という登録も必要になってきます。

今回のポイント

１：セレクターを「document」に指定
２：イベント設定後にクラス名を指定する
「$(document).on(‘touchstart’, ‘.button’,function(){」
こちらの内容が今回のポイントとなります。

後からクリックイベントを追加することもなくなり、
メンテナンス性としてはかなり向上されました。

web-wizardry

インターネット・スマホ、そしてテレビにwebの魔法をWizardry