同位素过滤器实施后 jQuery 调用不起作用

Posted 2023-05-09

【中文标题】同位素过滤器实施后 jQuery 调用不起作用

【英文标题】：jQuery call not working after Isotope filter is implemented

【发布时间】：2012-10-15 01:02:52

【问题描述】：

我目前正在使用同位素插件进行流体布局，我可以成功过滤内容，但是在调用过滤器后，我的其余 jQuery 调用无法工作。 请耐心等待，我还是 jQuery 新手，但这是我的代码：

jQuery(document).ready(function()

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


jQuery('.pics').click(function() 
      jQuery('#div'+jQuery(this).attr('rarget')).addClass('pics').removeClass('pics-hidden').delay(300).fadeIn(100);
      jQuery('#projectimages').isotope('reloadItems').isotope();
      return false;
       );       

var $container = $('#projectimages');

$container.isotope(
    itemSelector: '.pics',
    animationEngine: 'css',
    masonry: 
    columnWidth: 4
    
);


$('#menu a').click(function()
    var selector = $(this).attr('data-filter');
    $container.isotope( filter: selector );
  return false;
);
);

过滤器工作正常，（'pics'）点击功能也一样，但是在调用过滤器后，（'.pics'）点击功能现在无法工作。 是否有一个原因？或者有什么办法解决？尝试了各种方法，似乎没有任何效果。 任何建议都非常感谢！

【参考方案1】：

如果您将jQuery('.pics').click(function() 替换为

jQuery('#projectimages').on("click", ".pics", function() 

效果更好吗？这样，当您将 pics 类添加到元素时，它们应该会触发您的点击处理程序。

或者，您能否提供一个演示该问题的小提琴？

【讨论】：

不，不幸的是，这不起作用。我这里有一个demo上传到我的服务器上：nealfletcher.co.uk/testing-testing/testin点击左上角的橙色框会成功显示对应的div，但是调用了'Filter 1'之后，这个点击功能就失效了？

在过滤器发生后我无法显示那些 div 吗？

您可以反转同位素应用于它们的样式，或者您可以确保在单击后应出现的任何 div 包含适当的类。