動的に追加される要素に対する .hover は mouseenterとmouseleaveで対処する
hoverを使いたかった
CoffeeScriptです
$("#hoe").hover( -> $(@).attr("src", "image1") -> $(@).attr("src", "image2") )
でも、$.ajaxでとってきた(Callback)動的な要素に対しては結局そのままhoverはつかえなかった。じゃあこれは?
$("hoge").live("hover", -> $(@).attr("src", "image1") -> $(@).attr("src", "image2") )
理論上できるようなきがするんだけど、うまくいかなかった。
そこでもう一つマウスイベントをとってくるのにmouseenterとmouseleaveというのがあると知った
Blog not found
$('.reply').live("mouseenter", -> $(@).attr('src', './static/image/reply_hover.png') ) $('.reply').live("mouseleave", -> $(@).attr('src', './static/image/reply.png') )
こんな感じにしてやると、 .hoverっぽくやれる。ただもっと複雑に、「この画像をホバーすると画像が切り替わり、また、画像をクリックすると特定の画像に切り替わる」という動作にはなかなか対応できなかった。以下苦肉の策。
$('.fav').live("mouseenter", -> if $(@).attr('src') == './static/image/favorite_on.png' return false else if $(@).attr('src') == './static/image/favorite_hover.png' return false $(@).attr('src', './static/image/favorite_hover.png') ) TODO:既にfavってるものに対しての挙動がおかしい $('.fav').live("mouseleave", -> if $(@).attr('src') == './static/image/favorite_on.png' return false $(@).attr('src', './static/image/favorite.png') )
すでにある特定の画像なら return false で返してやるとかやったけど、なんか結局いまいちうまくいかなかったので、 .hover な挙動は諦めた。まあ、UX的にもそんなに重要じゃないし。