jQuery同位素过滤机制不起作用，而是页面只是刷新答案

【问题标题】：Jquery isotope filtering mechanism not working, instead page just refreshesjQuery同位素过滤机制不起作用，而是页面只是刷新
【发布时间】：2014-10-01 14:22:33
【问题描述】：

我正在尝试在我的 Rails 应用程序中使用 Isotope 作为过滤机制。

我已包含在我发送给客户端的 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

【问题讨论】：

您的代码运行良好，请检查此JSFiddle。
那是怎么回事？这是在 Rails 应用程序中，每次我选择一个过滤器时，它都会刷新页面。每个过滤器按钮都会变成一个链接到localhost:3000/#
问题是代码没有被执行。我在浏览器的JS上有一个断点，它并没有在断点处停止。
@tmarwen 制作了 jsfiddle.net/tmarwen/qp1h7rz8，效果非常好。问题是由于某种原因它没有被执行。
另外，我在同位素 JS 所在的同一个文件中的其他地方有一个断点，它停在那里。所以由于某种原因，没有找到/调用这个特定的函数。

标签： javascript jquery ruby-on-rails templates jquery-isotope

【解决方案1】：

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

【讨论】：