かなりハマったので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)


画面遷移無しでファイルのアップロードしようと思ったらiframeを使った技とかややこしい情報が色々出てきて、なかなかやりたいことに辿りつけなかったのでメモ。

やりたい事と条件

・ajaxなテキストファイルのアップロード
・テキストをRubyで編集して返す
・画面遷移せずに結果を表示
・IEは諦める。

必要最低限のコード

まずHTMLを用意

ajaxupload.html

つぎにjavascript

ajaxupload.js

んで何か処理をするRubyのスクリプト。ここではファイルの中身をそのまま返してるだけ。(パス名は適宜変更してください。)
ajaxupload.rb

デモ

サンプルを置いておきます。(さくらのレンタルサーバーはRubyの拡張子がrbではなくcgiじゃなくと動かなかったのでファイル名を変えています。

http://ironsand.net/misc/ajaxupload/ajaxupload.html

上のコードをZIPで固めた奴


jQuery を使って

「クリックされた時に左なら要素を消して、右なら何もしない。」

という動作をさせようと思ったら日本語だと検索してもすぐに答えが出てこなかったので、また stackoverflow から解説を紹介します。

実際のコードがこちら。

mousedown の時に渡されるイベントを確認して場合わけすればよい、と。

つまり左クリックで要素を隠すにはこうします。

他の方法

頻繁に使うのであれば jquery.detailclick.js を入れてこんな風に使えるようにしておくとよいかもしれません。やっぱりこちらの方が jQuery っぽくて見やすいですね。

("target").rightClick(function()
{
$(this).text('右クリックされました!').css('background-color', '#ff3399');
});

参考

javascript - How to distinguish between left and right mouse click with jQuery? - Stack Overflow
http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery
JSNote - 左、中、右クリックのカスタムイベントを追加するjQueryプラグイン
http://jsnt.blog.fc2.com/blog-entry-3.html


$(window).width() と $(document).width() や
$(window).height() と $(document).height() がどういう時に違う値を返すかわからなかったので検索したら Stack Overflow に簡潔でわかりやすい説明がされてたので紹介します。

When you have a scrollbar on the webpage.
(スクロールバーが表示されてる時)

わかりやすいですね。一応念のために書いておくと window が「ブラウザの表示領域」で、document が「ページ全体」です。

参考

jquery – When can $(document).width() and $(window).width() show different values? – Stack Overflow
http://stackoverflow.com/questions/8134741/when-can-document-width-and-window-width-show-different-values


lispでmapに初めて触れた時は「何、このめんどくさい関数?」と感じ、正直な話あまり触れたくもなかったのですが慣れてくるとこいつはとても便利な賢いやつです。

さてjavascriptでもmapが使えるか調べてみたらjQueryで提供されてました。

mapを使えば配列全部に関数を適用させて、返り値を配列で受け取れます。for文なんて使わなくてもええんやっ!!

使い方の例

定番の累乗を求めるサンプル。

サンプルには良く使われるけど、実際にプログラミングしてて累乗が必要になったことがないですね。まあサンプルなんで実用性よりも分かりやすさが重要だから当然といえば当然の話しですね。

とりあえずこんな感じの動作がmapはできます。

要素をまとめて取得

たとえばこんなhtmlがあって

配列で[1,2,3]が欲しいとする。

そんな時もこの map を使えば一発解決さ!(深夜の外人がやってる通販のノリで)

これでとれる。注意点は最後の get()。これがなくても配列っぽいのが返ってくるんだけども、これはjQuery-wrapped arrayというものらしく別物とのこと。

for文で実行したり arr[0] で要素のアクセスしたりはできるけどもjoinすると上手く行かない。このjoinがうまくできないのにはまってだいぶ時間を食われました。

arr.constructor でクラスを調べたら

となるべき所が

になってました。この「get() すればよい」という情報を得るためにどれだけ遠回りしたことか…。

とはいえこれで安心してmapをjavascriptでも使えるようになったのでガシガシ使っていこうと思います。

参考

http://api.jquery.com/map/