この記事は公開から9年、最終更新日からも9年経過しています。内容が古くなっている可能性があります。

[jQuery]動的に生成したHTML要素に対してhoverによる動作させるための手法

概要

動的に生成したHTML要素(今回はリンク付き画像)に対して、マウスオーバー(hover)したら、画像はフェードアウトかつそのリンク先のタイトルを表示させたかったのですが、以前このブログでも取り上げた方法の組み合わせでは動作しないことが判明。その解決方法を記載します。

やりたかった事と方針

Google Feed APIで取得した画像付きのRSSフィードを表示したページに対し、マウスを画像の上に重ねたらリンク先のタイトルを表示させたい。

過去の２つの記事の組み合わせで基本可能だと思ってたのですが、落とし穴があり結構苦労しました。
〜過去記事〜
[Google Feed API]サイトのRSSフィードを取得し画像付きで記事の内容を表示する
[jQuery]マウスオーバー時に画像をフェードもしくはスライドさせ、テキスト表示する

調べたところ、動的に生成したHTML要素にはhoverによる動作がうまくいかない、解決策はこうです！といった感じの記事がわりと見つかりました。
※もっと早く検索すればよかった。。。

正解は、hoverではなく、ON()を使用するとのこと。

一番参考になったのはこのサイト(有難うございます)→[jQuery]appendなどで追加した要素にはclickやhoverがきかないのを解決する : code14

動作させるためのjQuery記述

　　$(document).on(‘mouseenter’,’.boxgrid.fade’,function(){
　　　　$(“.cover”, this).fadeTo(500,0.2);
　　});
　　$(document).on(‘mouseleave’,’.boxgrid.fade’,function(){
　　　　$(“.cover”, this).fadeTo(“500”,1);
　　});

※「.boxgrid.fade」、「.cover」は筆者のサイトでの記述ですので読み替えて下さい。
※「fadeTo」で画像のOpacity(透過)の設定を徐々に変化させています。

うまくいかなかったjQuery記述

　　$(‘.boxgrid.fade’).hover(function(){
　　　　$(“.cover”, this).fadeTo(500,0.2);
　　}, function() {
　　　　$(“.cover”, this).fadeTo(“500”,1);
　　});

動作例

こちらのサイトに公開しています。

最後に、今後の展開

・いやあ、はまりました。Chromeデベロッパーツールでコードを追いかけるだけでは解決せず。「jQuery 動作しない」のキーワードで検索してからは早かったのですが。。。