Question

我已经使用jQuery同位素插件成功实现了一个过滤器，该插件会相应地过滤掉内容。唯一的问题是，在过滤器实现后，附加到过滤内容的点击功能不再有效。
这是我的代码：

jQuery(document).ready(function(){

var jQuerycontainer = jQuery('#projectimages');

jQuerycontainer.isotope({
    itemSelector: '.shown',
    animationEngine: 'css',
    masonry: {
    columnWidth: 2
    }
});

jQuery('#menu a').click(function(){
    var selector = jQuery(this).attr('data-filter');
    jQuerycontainer.isotope({ filter: selector });
  return false;
});
});


jQuery(document).ready(function(){

jQuery(".hidden").hide();
jQuery(".pics-hidden").hide();

jQuery('.wp-image-111').click(function() {
      jQuery('.post-98').addClass('shown').removeClass('hidden').delay(300).fadeIn(100);
      jQuery('#projectimages').isotope('reloadItems').isotope();
       });       
});

在实施过滤器后，附加到（'。wp-image-111'）的点击功能不再有效，是否有原因？如果有，有办法解决它吗？

Answer 1

jQuery('#post-'+jQuery(this).attr('larget'))
.removeClass('shown')
.addClass('.hidden')
  ---------^
.removeClass('#post-'+jQuery(this)
.attr('larget')).hide();

应该是

 jQuery('.close').click(function() {
   jQuery('#post-'+jQuery(this).attr('larget'))
    .removeClass('shown')
    .addClass('hidden');
   jQuery('#post-'+jQuery(this).attr('larget')).attr("id","");

}）;

你无法删除id。

Answer 2

可能您没有应用推荐的CSS;我没有，而且我的过滤器上的链接只会转到隐藏的项目（由于它们仍然在那里而且最重要的是我猜！） - 它们现在可以在应用之后起作用了：

/**** Isotope filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

div在同位素过滤后不可点击

2 个答案: