wordpress jQuery Mobile で構築したサイトで Infinite Scroll を使うとリンクが認識されない

CATEGORY: WordPress | TAG: ,

2013年10月2日

WordPress と jQuery Mobile で構築したサイトで Infinite Scroll を使ってコンテンツを読み込むと、何故か読み込まれたコンテンツのリンク（a 要素）が認識されなかったのでその解決方法に関するメモ。

現象

  • 読み込まれたコンテンツのリンク（a 要素）の色が反映されない。
  • リンクにマウスオーバーしてもカーソルはデフォルトのままで、ポインターにならない。
  • リンクをクリックしても全く反応しない。
  • 最初に表示されているコンテンツは、リンクが機能するが、Infinite Scroll でロードした後はその部分のリンクも同じ現象になる。
  • 同じサイトの PC 用のテーマでは全く問題ない。

PC 用のテーマでは問題がなかったことと、以下のようにするとリンク要素の色は反映されたので、最初は、jQuery Mobile の問題だと思ってしまった。

jQuery(function($){
    $('#content').infinitescroll({
        navSelector : ".pagenavi", 
        nextSelector : ".pagenavi a:last",　
        itemSelector : ".recent_work" 
    }, function (){
           $( "div[data-role=page]" ).page( "destroy" ).page();
           //または $( "div[data-role=page]" ).trigger('create');
     });
});

原因

いろいろと試してみたが、現象は変わらなかったため、コンテンツの中のリンク部分を個別（要素ごと）に読み込んでみると、ちゃんとリンクが機能することが判明。

読み込み対象のコンテンツ部分

<div class="work">
<p class="main_photo"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('works'); ?></a></p>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
・・・省略・・・
</div><!-- end of .work -->

切り分けたところ、外側の div 要素を読み込むと現象が発生することがわかったので、それに指定している CSS を変更してみたところ、この div 要素に指定していた「float」の指定を外すと全く問題がなくなることが判明。

#content div.recent_work {
  float: left;  /*これを削除して解決*/
  width: 90%;
  margin: 10px 0;
  padding: 30px 10px;
  border:1px solid #CEA6CC;
  text-align: center;  
  background-color: #fff;
}

PC 用の CSS を流用したため本来は不要な「float」の指定だったので、削除しても問題なかったが、「float」の指定でこんな現象が発生するとは思っても見なかった。原因は特定できたが、なぜそのようになるのかは不明。