Question

我目前正在使用同位素插件创建一个允许我放置多个选择下拉列表的函数。当用户选择下拉菜单并单击提交时，它会触发事件并重新排列项目。

我收到的问题是更改事件正在触发并删除所有内容，但是当我单击提交时，将返回正确的结果。

Jquery的：

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

  var $container = $('.finalblock'),
      filters = {},
      selector;

  $container.isotope({
    itemSelector : '.finalchannel',
    layoutMode: 'none'
  });


  $('select').change(function(){
    var $this = $(this);
      $('#mainSubmission').click(function() {
        var group = $this.attr('data-filter-group');
        filters[ group ] = $this.find(':selected').attr('data-filter-value');
        var isoFilters = [];
        for ( var prop in filters ) {
          isoFilters.push( filters[ prop ] )
        }
        var selector = isoFilters.join('');

        $container.isotope({ filter: selector });
        return false;
      });
  });
});

我一直在研究bind()功能，但这似乎并没有给我正确的选择（也许是因为我必须做错事。

$('select').bind('initCheckboxes change', function() {
     // do some stuff including ajax work
}).trigger('initCheckboxes');

编辑： JSFIDDLE：http://jsfiddle.net/Lnzkv3v7/

Answer 1

只看你的代码，（在网站上，而不是jsfiddle）：

第一个select元素的id为filters

<select id="filters" data-filter-group="mainfilter">

但你知道你的js存储为变量吗？

var $container = $('.finalblock'),
    filters = {},
    selector;

由于大多数这些元素都被Isotope吸引，这可能是个问题。这是一个理论的原因是因为你的第二个选择元素似乎没有引起问题。因此，将第一个选择ID更改为其他内容并查看其是否有效。

更改事件触发而不单击

1 个答案: