Question

Hi I am using the jquery quicksand plugin to create a portfolio website.On each image that I have I am trying to create a hover effect with jQuery.The effect works at first but after I click the buttons that are atached to the quicksand plugin the hover effect doesn’t work anymore.I noticed this hapening before when I create a new element and insert it into the DOM the click handler doesn’t get attached to it.

How can I solve this problem?

This is the code for both the quicksand blugin and the hover effect:

 $(document).ready(function() {

  var $filterType = $('#filterOptions li.active a').attr('class');
  var $holder = $('ul.ourHolder')
  var $data = $holder.clone();

  $('#filterOptions li a').click(function(e) {
    $('#filterOptions li').removeClass('active');

    var $filterType = $(this).attr('class');
    $(this).parent().addClass('active');
    if ($filterType == 'all') {
      var $filteredData = $data.find('li');
    }
    else {
      var $filteredData = $data.find('li[data-type=' + $filterType + ']');
    } 
    $holder.quicksand($filteredData, {
      duration: 800,
      easing: 'easeInOutQuad'
    });
    return false;
  });

   //hover effect
    var portfolio =  $("ul.ourHolder li");
    portfolio.on('mouseover', function(){
        $(this).children('div.full').stop().fadeTo('slow',0.5);     
    }) 
    portfolio.on('mouseout' , function(){
        $(this).children('div.full').stop().fadeOut();
    })
});

Answer 1

That particular usage of .on() only binds event handlers to elements that existed when the code was run, and won’t affect elements that are added dynamically after that code has been executed. Instead you’ll need to use the event delegation syntax for .on(), something like this:

$(document).on('mouseover', 'ul.ourHolder li', function(){
    $(this).children('div.full').stop().fadeTo('slow',0.5);     
}) 

Ideally you’d replace document with a selector for a more specific, but not dynamically added, element that contains all of the elements you want to execute the callback function for when they trigger the mouseover event.