PJAX with PHP - 動作しません。

Question

私は現在、選択的なコンテンツ読み込みのためにPJAXを実装しようとしています。

これはポートフォリオサイトで、index.phpにサムネイルをクリックしたときに動画プレーヤーのページをリロードするとします。対応するビデオページでPJAXへ

ページはhere

を見つけることができる私は<div>要素がcontent呼ばれていて、私は<a>要素（content内）のいずれかをしたい（content要素へ）

私のJavascriptは以下の通りです：

<script type="text/javascript"> 
      $(document).ready(function() { 

       var $container = $('#thumbnail-array'); 

       $container.imagesLoaded(function() { 
        $container.masonry({ 
         itemSelector: '.video-thumbnail', 
         columnWidth: '.grid-sizer', 
         gutter: '.gutter-sizer', 
         percentPosition: true 
        }); 
       }); 

      jQuery('.mobilemenu').click(function(e) { 
       jQuery(this).toggleClass('is-active'); 
       jQuery('.mobile-nav').toggleClass('active'); 

       var delay = 100; 
        $('.linkitem').each(function(i, e) { 
        setTimeout(function() { 
        $(e).toggleClass('animate'); 
        }, i * delay); 
       }); 

       if(jQuery('.mobile-nav').hasClass('active')) { 
        $('body').on('touchmove', false); 
       } else { 
        $('body').off('touchmove', false); 
       } 
       }); 

       BackgroundCheck.init({ 
        targets: '.name logo, .rightnav, .mobilemenu mobilemenu--htx' 
      }); 

      $(".fittext").fitText(1.5); 
      $(".fittext2").fitText(1.3, { minFontSize: '15px', maxFontSize: '20px' }); 

      $('.content a').pjax(); 

      $('.overlay').hover(function(){ 
       $(this).parent().find('video').get(0).play(); 
       }, function() { 
        var video = $(this).parent().find('video').get(0); 
        video.pause(); 
        video.currentTime = 0; 
       }); 
      }); 
      $(window).bind("load", function() { 
      $.getScript('js/social.js', function() {}); 
      }); 
     </script> 

私はPJAXに関連するフィードバックや、全ページの読み込み動作。

どこが間違っていますか？

Answer 1

セレクタには間違いがあります。そして、あなたはdivがclassないそれがあるべきidあります

$('.content a').pjax(); 

Answer 2

を私は別のスクリプトの私の使用に関して、BackgroundCheck.JSでJavaScriptのエラーが発生しました - ！：

<script type="text/javascript"> 
     $(document).ready(function() { 

      var $container = $('#thumbnail-array'); 

      $container.imagesLoaded(function() { 
       $container.masonry({ 
        itemSelector: '.video-thumbnail', 
        columnWidth: '.grid-sizer', 
        gutter: '.gutter-sizer', 
        percentPosition: true 
       }); 
      }); 

     jQuery('.mobilemenu').click(function(e) { 
      jQuery(this).toggleClass('is-active'); 
      jQuery('.mobile-nav').toggleClass('active'); 

      var delay = 100; 
       $('.linkitem').each(function(i, e) { 
       setTimeout(function() { 
       $(e).toggleClass('animate'); 
       }, i * delay); 
      }); 

      if(jQuery('.mobile-nav').hasClass('active')) { 
       $('body').on('touchmove', false); 
      } else { 
       $('body').off('touchmove', false); 
      } 
      }); 


     $(".fittext").fitText(1.5); 
     $(".fittext2").fitText(1.3, { minFontSize: '15px', maxFontSize: '20px' }); 

     $('.content a').pjax(); 

     $('.overlay').hover(function(){ 
      $(this).parent().find('video').get(0).play(); 
      }, function() { 
       var video = $(this).parent().find('video').get(0); 
       video.pause(); 
       video.currentTime = 0; 
      }); 
     }); 
     $(window).bind("load", function() { 
     $.getScript('js/social.js', function() {}); 
     }); 

     document.addEventListener('DOMContentLoaded', function() { 
      BackgroundCheck.init({ 
       targets: '.name, .logo, .desktop-nav, .right-nav, .mobilemenu span, .mobilemenu span:before, .mobilemenu span:after, .mobilemenu--htx' 
      }); 
     }); 

    </script> 

下に改訂されたJavaScriptを参照してください。

私はまだいくつかの問題を抱えていますが、少なくとも私はPJAXがコンテンツをプッシュするのを見ることができます。