jQuery で初歩的な失敗をした。
以下、その備忘録。
では、本題に入ろう。
jQueryでワテの失敗
ワテは、jQuery をこの数か月間猛烈に勉強して来て或る程度使いこなせるようになったと思っていたのだが、先日、以下のような失敗をした。
こんな長方形を表示して、長方形内部にマウスポインターが入った時にmouseover などのイベントを取得したいと思った。
で、こんな JavaScript コードを書いた。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<script type="text/javascript">
$("#divID")
.mouseover(function () {
alert('mouseover');
})
.mouseout(function () {
alert('mouseout');
})
.mouseenter(function () {
alert('mouseenter');
})
.mouseleave(function () {
alert('mouseleave');
});
</script>
<div id="divID" style="width:200px;height:100px;border:1px solid red"></div>
</body>
</html>
でも、マウスを長方形領域に出し入れしても全く反応しない。
何でやねん？
最初は Chrome で試した。クロムブラウザーがおかしいのか？と思って、
Internet Explorer 11でも試した。それでも無反応。ついでに Firefox でも試したが無反応。
う～ん、何かおかしい。
解決方法
下のように修正したら解決した。
<script type="text/javascript">
$(document).ready(function () {
$("#divID")
.mouseover(function () {
alert('mouseover');
})
.mouseout(function () {
alert('mouseout');
})
.mouseenter(function () {
alert('mouseenter');
})
.mouseleave(function () {
alert('mouseleave');
});
});
</script>
つまり、マウスのイベントハンドラ関数を div に割り当てる処理を
$(document).ready() {
...
}
の中に入れる必要があるのだ。
そうすると、DOM が構築された後で期待通りにイベントハンドラが割り当てられる。
最初の方法では、DOM 構築前にそれらの処理を実行したので、失敗？したのか、無効になったのか？良く分からないが、兎に角、うまく動かないのだ。
と言うことで、mouseover が効かない時には $(document).ready() の中に入れると良い。
たぶん、
$(window).ready() {
...
};
$(window).load() {
...
};
の中でやっても上手く行くと思う。
結局、問題発生から原因究明まで一時間近く掛かってしまった。
ああ、時間の無駄だ。
まとめ
jQueryのmouseイベントハンドラを定義する場所を間違うと、イベントハンドラを検出出来ない問題が起こる。
原因は、DOMが完全にロードされた時点でイベントハンドラを定義する必要がある。
ワテの場合はそれを忘れていた。
以下、まとめ。
jQueryのイベントハンドラを使う正しいやり方
jQueryを使う場合に、もしmouseoverなどのイベントハンドラが効かない時には
$(document).ready(){
...
};
の中に入れると良い。
あるいは最近では、以下の書き方のほうが流行りだ。
$(function(){
...
});
あるいはjQueryを使わずにピュアなJavaScriptで書くなら、こんな感じか。
// ワテのお勧め
document.addEventListener("DOMContentLoaded", function(){
...
});
兎に角、これらの関数の中に、使いたいイベントハンドラ定義行を書き込んでおけば正しく動く。
WordPressでjQueryを使う場合
WordPressでjQueryを使う場合は以下の通り。
// ワテのお勧め
jQuery(function($){
// ここでは $ が使える。
var div_all = $('div');
...
});
これ以外に、以下の記述でも可能だ。
jQuery(document).ready(function($){
...
});
jQuery().ready(function($){
...
});
(function($){
...
})(jQuery);
でもまあ、あまり色んなのを使うと混乱の元なので、ワテの場合は「ワテのお勧め」版を使う事に決めている。
やっぱり JavaScript や jQuery のちゃんとした教科書を買って読むべきかな。
こういう本格的な本を読めば勉強になると思うのだが、ワテにはハードルが高過ぎる。
たぶん、途中で挫折すると思う。
マンガならワテでも読めるかもしれん。
コメント