Question

I have a problem with jQuery: when i click in Home Page on a thumb image opens the iframe but when i click on a filter item and on the image thumb opens up the post.
This is my website tests: [obscured]

Why when i click on a filter and then on the image thumb opens the post instead of iframe?

Thank you and sorry for my bad english!

Answer 1

When you filter the portfolio items, those are regenerated dynamically, so the previously binded behavior is lost (In your case, a click event).

To solve that jQuery has the .live() event, which attaches the event handler not only to current DOM elements but also to elements created in the future (i.e. not created when the DOM was loaded but later).

In your .js code you have this call:

portfolioItemsEnabled.click( function (e) {
  if(!jQuery(this).hasClass('active') && jQuery(this).hasClass('visible')) {    
    portfolioItems.removeClass('active');
    jQuery(this).addClass('active');
    portfolioItems.not('.active').find('.overlay').css({ display: 'none' });
    var postId = jQuery(this).attr('id').split('portfolio-')[1];
    tz_getPortfolio(postId);
  }
  e.preventDefault();
});

And in order to make it work anytime, even when new/different portfolio items are loaded, you should change the call like this

jQuery('#portfolio-items.enabled li').live("click", function(e) {
  if(!jQuery(this).hasClass('active') && jQuery(this).hasClass('visible')) {    
    portfolioItems.removeClass('active');
    jQuery(this).addClass('active');
    portfolioItems.not('.active').find('.overlay').css({ display: 'none' });
    var postId = jQuery(this).attr('id').split('portfolio-')[1];
    tz_getPortfolio(postId);
  }
  e.preventDefault();
});