PJAX与PHP - 不工作

我目前正在试图实现PJAX选择性内容加载。PJAX与PHP - 不工作

这是一个投资组合网站，我想在点击index.php的任何缩略图时重新加载视频播放器页面。

页可以找到here

我有一个<div>元件称为content，我想任何<a>元件（内content）至PJAX在对应的视频页面（进入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有关的错误或反馈，只是你整页加载的行为。

我哪里错了？

来源

2016-04-11 hj8ag

您的选择器有一些错误。而你div有class不是id它应该是：

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

来源

2016-04-11 12:25:31 vitorio

如果你可以检查你的控制台，你会看到一个元素未找到错误。 – vitorio

我已经纠正了代码中的ID /类不匹配，但仍然没有骰子！这个错误似乎也被另外一个脚本抛出，即'backgroundcheck.js' - 这可能会影响PJAX调用吗？ – hj8ag

如果您的网页上有任何js错误，您的其他js代码可能无法正常工作。请提供完整的js代码以获得相关答案。 – vitorio

我有一个JavaScript错误与问候我使用其他脚本的，BackgroundCheck.JS - 见下面!:

<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推送内容。

来源

2016-04-12 14:15:51 hj8ag

PJAX与PHP - 不工作

回答

相关问题