jQuery のイベント委譲

スマホサイトで使う JavaScript で、覚えたてのイベント委譲を得意になって使ってたんだけど、タップエリア(クリッカブルな範囲)が望まないものになっていることに気付いた。

$('ul').on('click', 'li', function() {
    ....
});

こんなコード。<li> 要素だけクリックできて欲しかったんだけど、その親である <ul> 全体の範囲が反応してしまう。考えてみると当然の挙動なんだけど。
<li> 要素を動的に追加してもイベントを捉えてくれるので、イベント委譲は便利だったんだけど、こうなると使えるところが限られてくる。

Last updated on July 8, 2015