jQueryプラグインBlockUIのIEにおける不具合とeach()
jquery.jfeed.jsの非同期処理を連続して発生させたくなかったので、
jQueryプラグインのjQuery.blockUI.jsを導入したらIEだけ動作せず。
デモページをIEで確認したら普通に動作していたので謎だったが、
どうやらjQuery.blockUI.js内で使用されているeachメソッドが原因だった模様。
動作しないソース
<ul id="tabs"> <li> <a href="hoge1">リスト1</a> </li> <li> <a href="hoge2">リスト2</a> </li> <li> <a href="hoge3">リスト3</a> </li> </ul>
$('#tabs li').click(function(){ test($(this).children().attr('href')); return false; }); function test(str){ $.blockUI(); $.getFeed({ //jquery.jfeed.js url: str, success: function(feed){ //一連の処理 $.unblockUI; } }); }
修正後のソース
<ul id="tabs"> <li class="list1"> <a href="hoge1">リスト1</a> </li> <li class="list2"> <a href="hoge2">リスト2</a> </li> <li class="list3"> <a href="hoge3">リスト3</a> </li> </ul>
$('#tabs li.list1').click(function(){ test($(this).children().attr('href')); return false; }); $('#tabs li.list2').click(function(){ test($(this).children().attr('href')); return false; }); $('#tabs li.list3').click(function(){ test($(this).children().attr('href')); return false; }); function test(str){ $.blockUI(); $.getFeed({ //jquery.jfeed.js url: str, success: function(feed){ //一連の処理 $.unblockUI; } }); }
デモページは同名の要素が複数存在するケースがないことに着目。
調べる途中で、IEでは残念ながらeach()が使えないことも判明した。
5.forEachやmapなどのjavascript1.6の新機能。基本的にはIEで使えません。IEで使うにはfirefoxのページで公開されてる互換性パッチ(例)をソースに組み込む必要があります。
» jQueryでもはまるクロスブラウザ問題まとめ: エスキュービズム ラボ Blog
このパッチを使ってみたがうまくいかなかったので(おそらくやり方が悪い)、各liに個別のクラス名を付与し、各liごとにクリック時の処理を分けたら動作した。
IEでもeach()を活用したい場合は、上記リンクを参照していただければ。