Jquery同位素过滤机制不工作，而不是页面刷新

我想在我的Rails应用程序中使用同位素过滤机制。Jquery同位素过滤机制不工作，而不是页面刷新

我已经包含在JS文件，我发送给客户端：

/*-----------------------------------------------------------------------------------*/ 
/* ISOTOPE PORTFOLIO 
/*-----------------------------------------------------------------------------------*/ 
$(document).ready(function() { 
    var $container = $('.items'); 
    $container.imagesLoaded(function() { 
     $container.isotope({ 
      itemSelector: '.item', 
      layoutMode: 'fitRows' 
     }); 
    }); 

    $('.portfolio .filter li a').click(function() { 

     $('.portfolio .filter li a').removeClass('active'); 
     $(this).addClass('active'); 

     var selector = $(this).attr('data-filter'); 
     $container.isotope({ 
      filter: selector 
     }); 

     return false; 
    }); 
});

为我的HTML：

<div class="portfolio"> 
     <ul class="filter"> 
     <li><a class="active" href="#" data-filter="*">All</a></li> 
      <li><a href="#" data-filter=".vegan">Vegan</a></li> 
      <li><a href="#" data-filter=".organic">Organic</a></li> 
     </ul> 
     <ul class="items col4"> 
      <li class="item vegan"> 
       <figure class="icon-overlay medium icn-more"> 
       <a href="" class="fancybox-media" data-rel="portfolio"> 
        <img src="default.png" alt=""> 
       </a> 
       </figure> 
       <div class="image-caption"> 
       <h3><a href="#">How to cook quinoa</a></h3> 
       <span class="meta"></span> 
       </div> 
      </li> 
      <li class="item organic"> 
       <figure class="icon-overlay medium icn-more"> 
       <a href="" class="fancybox-media" data-rel="portfolio"> 
        <img src="default.png" alt=""> 
       </a> 
       </figure> 
       <div class="image-caption"> 
       <h3><a href="#">How to organic food</a></h3> 
       <span class="meta"></span> 
       </div> 
      </li> 
     </ul> 
    </div>

当我点击过滤器按钮，它的作用是刷新网页。

此外，我发送到客户端jquery.isotope.min.js应该是同位素工作的来源。

此代码作为Rails应用程序使用的主题的一部分。

没有控制台错误表明同位素有问题。

编辑：

的代码工作正常，但没有被放置一个断点在JS功能后，在浏览器中执行。

而且，我注意到了模板，我的Rails应用程序使用jquery.isotope.min.js，其中的小提琴是用isotope.pkgd.min.js

模板，可以发现：

http://themeforest.net/item/-slowave-multipurpose-responsive-wordpress-theme/6870792

来源

2014-10-01 Adam Bronfin

你的代码工作正常，请检查* [JSFiddle]（http://jsfiddle.net/tmarwen/qp1h7rz8/）*。 – tmarwen 2014-10-01 14:42:21

那又怎么回事？这是在rails应用程序中，每次我选择一个过滤器刷新页面。每个过滤器按钮都成为http：// localhost：3000 /＃ – 2014-10-01 14:43:38

的链接问题是代码没有被执行。我在浏览器的JS上有一个断点，它不会停在断点处。 – 2014-10-01 14:57:35

这个问题原来是在同位素JS能够执行之前加载的另一块JavaScript中的错误。删除/解决破损的JS修复了这个问题。

来源

2014-10-03 13:44:10

Jquery同位素过滤机制不工作，而不是页面刷新

回答

相关问题