かなりハマったので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.
jQuery で選択した要素が存在するかどうかの関数が何故か用意されてないようだったので追加しました。
CoffeeScriptで書いてるのでjavascriptとして使いたい場合は converter にかけてください。
$.fn.isExist = -> $(@).length != 0 $.fn.isNotExist = -> $(@).length == 0 参考 [How to tell if an element exists | jQuery for Designers – Tutorials and screencasts][1]
rails には 値の有無をチェックするときにタブやスペースなどの空白が入っていても「空」だと判断する便利な blank? 関数が用意されていますが、どうやら JavaScript や jQuery には用意されてないので追加してみました。
自分で書いた後にもっと良さそうなコードを見つけたのでそちらを紹介します。
JavaScript $.fn.isBlank = function() { return !$(this.html()) || $.trim($(this).html()) === ""; }; Coffee もちろん Rails 標準のCoffeeも。
$.fn.isBlank = - !$(@.html()) || $.trim($(@).html()) is "" 参考 [Checking for blank input with jQuery – Stack Overflow][1]
[jQuery isBlank() | LakTEK (Lakshan Perera)][2]
Railsのプロジェクトで coffee script を使うけどもコンパイルは全て Asset pipelineがやってくれるので、たまに変換結果の js をちょっと見てみたい時に困った事になります。
なのでEmacsの smart compile の機能を使ってすぐに 出力結果を得られるようにしてみました。
解決策 coffee -pで標準出力に変換結果を出力してくれるので
(global-set-key (kbd "C-c C-x") 'smart-compile) (setq smart-compile-alist (append '(("\\.rb$" . "ruby %f")) '(("\\.php$" . "php %f")) '(("\\.coffee$" . "coffee -p %f")) '(("\Gemfile$" . "bundle install")) smart-compile-alist)) としておけばOKです。
参考 [Convert coffee to javascript and show the result to standard output in Emacs – Stack Overflow][1]
