SEEDS Creator's Blog

読者です 読者をやめる 読者になる 読者になる

".on()"での"hover"の記述でつまずいたので

初秋の候、皆様お変わりなくお過ごしでしょうか。
私は年齢のためか、右足太ももに激痛を感じている今日この頃です…

さて、話は変わりまして、業務でjavascriptでプログラムを作成していた時のことなのですが、動的に生成される要素に"hover"で動作を設定したかったので、単純に".on()"で処理をしようと考えたのです。

".on()"で"hover"を機能させるには

".on()"に"hover"を引数として書いても機能しない

$(".hoge").on("hover", function(){...});

まず単純に考えて上記の様に記述したのですが、見事に動作しませんでした… 動作すると思い込んでいたため、見当違いな部分を修正したりして、つまずき時間を費やしてしまいました。

".hover()"は".mouseenter()"と".mouseleave()"

とりあえず、私のちっぽけな頭脳では全く解答が導き出せなかったので、Google先生に相談しました。 すると、「".hover()"は".mouseenter()"と".mouseleave()"をまとめたものである」とのことでした。 なるほど、つまりそもそも引数に"hover"を渡すということが間違いだったようです。

".mouseenter().mouseleave()"を".on()"で記述

ということで、Google先生の相談の結果、書き直すと

$(".hoge").on({
"mouseenter": function(){...},
"mouseleave": function(){...}
});

上記コードになります。 これで".on()"での"hover"の記述するということはできました。

しかし、もう一声

先ほどのコードでは、動的に生成される要素には適用されません。 ですので、動的生成要素に対応する場合はコチラ

$(document).on({
"mouseenter": function(){...},
"mouseleave": function(){...}
}, ".hoge");

"document"の部分は親要素が決まっていれば、その親要素の指定で大丈夫なようです。 上記コードで私の思っていた動作が無事実現できました。

後述

私がまだまだ未熟というか圧倒的に知識、技術が乏しいので、ごく当然なことだったのかもしれませんが、記事にしました。 調べたことは(なるべく)忘れないよう身に付けて、成長していこうと思います。

全く話は変わるのですが、"つまずく"って「爪(つま)突(づ)く」の意のようですが、"つまづく"ではなく"つまずく"と書くのがどうも一般的なようですね…知らなかった…

参考サイト

tacamy.hatenablog