Question

I’m currently using the isotope plugin for a fluid layout, I can successfully filter the content, but after the filters have been called, the rest of my jQuery calls fail to work.
Bear with me, I’m still new to jQuery but here’s my code:

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;
});
});

The filter works fine, as does the (‘pics’) click function, BUT after the filter has been called, the (‘.pics’) click function now fails to work.
Is there a reason for this? Or a way to solve it? Tried all sorts, nothing seems to be working.
Any suggestions are greatly appreciated!

Answer 1

If you replace jQuery('.pics').click(function() { with

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

does it work any better? This way when you add the pics class to elements they should trigger your click handler.

Alternatively, could you provide a fiddle demonstrating the issue?