動的に追加したDOM要素にhoverイベントリスナーを追加する

かなりハマったのでappend()などを使って動的に追加したHTMLの要素にhoverイベントを追加する方法を残しておきます。説明は全部 coffee script で書いてるので生のJSが良い人は自動変換サービスでもをつかってください。

前提となる知識

まず基本として $('#foo').click -> console.log "押された！" のように #foo に対して click イベントが追加されているわけですが、このイベントの追加はページの読み込み時に行われるために append() などで後から動的に追加された要素にはイベントの登録がされません。

なのでそれを解決するために昔の delegate(), 今なら on() メソッドがあるわけです。簡単でわかり易い名前に統一されたので見た目はスッキリしたのですが、代わりにサンプルコードを探すのが大変になりました。 on って単語短すぎやしません…？

後から追加された要素に click イベントを追加

前置きが長くなりましたが

$('#foo').click -> console.log "押された！"

を動的に追加された要素に適用させるには

$(document).on 'click', '#foo', -> console.log "押された！"

とします。document 内部の要素がクリックされるたびにイベントが発火され、クリック対象が #foo ならメソッドが実行されます。もちろん document ではなくページ読み込み時に存在する #foo の親に当たる要素なら何でも構いません。無駄なイベントを発生させないためにできるだけ近い親が良いでしょう。

後から追加された要素に hover イベントを追加

同様に hover イベントも click イベントのように簡単に書き換えれたらいいのですが、hover イベントを on() を使って割り当てると hover は mouseenter と mouseleaveという複数のイベントを受け取っており、このように複数のイベントを受け取ってる関数を on メソッドで割り当てるためにはどのイベントを受け取ったのかを判別して処理する必要が出てきます。

記述が間違っていたので修正しました。

onイベントの引数として "hover"を使った場合、それは単なる "mouseenter mouseleave" の別名であって hover() 関数とは無関係であり、またこの記述方法は jQuery1.8 で depracated で 1.9 では削除されたそうです。

以下はマウスカーソルがあたった時に、クリックできる要素だとユーザーに伝えるためにマウスの形状を変更するコードですが

$('#foo').hover \
  (-> $(@).css "cursor", "pointer"), \
  (-> $(@).css "cursor", "default")

のようなコードがあった時に

$(document).on 'hover', '#foo', \
  (-> $(@).css "cursor", "pointer"), \
  (-> $(@).css "cursor", "default")

では動きません。

解決策

実際に動くコードは以下のようになります。

$(document).on
    mouseenter: -> $(@).css "cursor", "pointer",
    mouseleave: -> $(@).css "cursor", "default"
  , '#foo'

参考

[javascript – JQuery .on() method with multiple event handlers to one selector – Stack Overflow][1]

[.on() | jQuery API Documentation][2]