初秋の候、皆様お変わりなくお過ごしでしょうか。
私は年齢のためか、右足太ももに激痛を感じている今日この頃です…
さて、話は変わりまして、業務でjavascriptでプログラムを作成していた時のことなのですが、動的に生成される要素に”hover”で動作を設定したかったので、単純に”.on()”で処理をしようと考えたのです。
“.on()”で”hover”を機能させるには
“.on()”に”hover”を引数として書いても機能しない
1$(".hoge").on("hover", function(){...});
2まず単純に考えて上記の様に記述したのですが、見事に動作しませんでした…
動作すると思い込んでいたため、見当違いな部分を修正したりして、つまずき時間を費やしてしまいました。
“.hover()”は”.mouseenter()”と”.mouseleave()”
とりあえず、私のちっぽけな頭脳では全く解答が導き出せなかったので、Google先生に相談しました。
すると、「”.hover()”は”.mouseenter()”と”.mouseleave()”をまとめたものである」とのことでした。
なるほど、つまりそもそも引数に”hover”を渡すということが間違いだったようです。
“.mouseenter().mouseleave()”を”.on()”で記述
ということで、Google先生の相談の結果、書き直すと
1$(".hoge").on({
2"mouseenter": function(){...},
3"mouseleave": function(){...}
4});
5上記コードになります。
これで”.on()”での”hover”の記述するということはできました。
しかし、もう一声
先ほどのコードでは、動的に生成される要素には適用されません。
ですので、動的生成要素に対応する場合はコチラ
1$(document).on({
2"mouseenter": function(){...},
3"mouseleave": function(){...}
4}, ".hoge");
5“document”の部分は親要素が決まっていれば、その親要素の指定で大丈夫なようです。
上記コードで私の思っていた動作が無事実現できました。
後述
私がまだまだ未熟というか圧倒的に知識、技術が乏しいので、ごく当然なことだったのかもしれませんが、記事にしました。
調べたことは(なるべく)忘れないよう身に付けて、成長していこうと思います。
全く話は変わるのですが、”つまずく”って「爪(つま)突(づ)く」の意のようですが、”つまづく”ではなく”つまずく”と書くのがどうも一般的なようですね…知らなかった…
参考サイト
