jQuery hover effect on aded DOM elements doesn't work
<p>Hi I am using the jquery <a href="http://razorjack.net/quicksand/" rel="nofollow">quicksand</a> 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.</p>

<p>How can I solve this problem?</p>

<p>This is the code for both the quicksand blugin and the hover effect:</p>

<pre><code> $(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();
    })
});
</code></pre>
