自定义javascript不会触发当点击html选项标记

Question

我有几个链接，当他们之一被点击，如“史诗”，那么每个具有相同类名称的div将保留，其他将被过滤出。

通常它的工作原理，但即时通讯尝试一个新的系统。当我点击一个选项时，我不想点击链接，而是希望前面提到的链接被触发。不幸的是它不起作用。与数据过滤器关联的元素不会被过滤。当链接但是它的工作原理灿烂工作：

你可以看到运行中的功能在现场即时测试的朋友：http://rolfvohs.com/

我认为这个问题是E（“滤波器按钮选项。”） 。点击（函数（）{虽然我不知道为什么。也许我失去了一些东西。

我会很乐意为一些答案作为即时通讯非常绝望了。我不能想出解决办法。

<select class="cd-select"> 
         <option value="-1" selected>Pick a Genre</option> 
         <option value="1" data-filter="*">All</option> 
         <option value="2" data-filter=".epic">Epic</option> 
         <option value="3" data-filter=".classic">Classic</option> 
         <option value="4" data-filter=".pop">Pop</option> 
         <option value="5" data-filter=".rock">Rock</option> 
        </select> 

我的自定义JavaScript

jQuery(document).ready(function(e) { 

     var t = e("#filter-container"); 
     t.imagesLoaded(function() { 
      t.isotope({ 
       itemSelector: "figure", 
       filter: "*", 
       resizable: false, 
       animationEngine: "jquery" 
      }) 
     }); 
     $("select").on("change", function() { 
      var n = e(this).parents(".filter-buttons"); 
      var r = e(this).attr("data-filter"); 
      t.isotope({ 
       filter: r 
      }); 
      return false 
     }); 
     e(".toggle-trigger").click(function() { 
      e(this).next().toggle("slow"); 
      e(this).toggleClass("active"); 
      return false 
     }).next().hide(); 
     e(window).resize(function() { 
      var n = e(window).width(); 
      t.isotope("reLayout") 
     }).trigger("resize") 
    }) 

Answer 1

选项，不用在大多数浏览器点击事件。您需要监听select上的更改事件。

根据讨论的意见，更新的代码

$("select").on("change", function() { 
    var select = $(this); 
    var selectedOption = select.find("option:selected"); 
    var n = select.parents(".filter-buttons"); 
    var r = selectedOption.attr("data-filter"); 
    t.isotope({ 
     filter: r 
    }); 
    return false 
});