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

前提となる知識

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

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

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

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

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

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

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

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

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

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

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

では動きません。

解決策

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

参考

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

.on() | jQuery API Documentation


jQuery で選択した要素が存在するかどうかの関数が何故か用意されてないようだったので追加しました。

CoffeeScriptで書いてるのでjavascriptとして使いたい場合は converter にかけてください。

参考

How to tell if an element exists | jQuery for Designers – Tutorials and screencasts


rails には 値の有無をチェックするときにタブやスペースなどの空白が入っていても「空」だと判断する便利な blank? 関数が用意されていますが、どうやら JavaScript や jQuery には用意されてないので追加してみました。

自分で書いた後にもっと良さそうなコードを見つけたのでそちらを紹介します。

JavaScript

Coffee

もちろん Rails 標準のCoffeeも。

参考

Checking for blank input with jQuery – Stack Overflow

jQuery isBlank() | LakTEK (Lakshan Perera)


Railsのプロジェクトで coffee script を使うけどもコンパイルは全て Asset pipelineがやってくれるので、たまに変換結果の js をちょっと見てみたい時に困った事になります。

なのでEmacsの smart compile の機能を使ってすぐに 出力結果を得られるようにしてみました。

解決策

coffee -pで標準出力に変換結果を出力してくれるので

としておけばOKです。

参考

Convert coffee to javascript and show the result to standard output in Emacs – Stack Overflow