html .append( ) content is no longer working with filter JS script

This site is best viewed in a modern browser with JavaScript enabled.

html .append( ) content is no longer working with filter JS script

Jerrell_B

I am using append() to loading content into a div called '#works' in my index.html, I also have a filter in place to hide and show the appended content based on the elements class (eg. .css, .js, .html).

When i place the content i am appending directly into the html the filter works perfectly!

But when I append() the content the filter for some reason does not work. I have tried applying .live() , .on() , and .bind( ) to my filter script but it is still not working.

Does anyone know what I am doing wrong?

HTML code:

<ul id="works_filter">
          <li><a href="#" data-filter="*" class="selected">Show All</a></li>
          <li><a href="#" data-filter=".css">CSS</a></li>
          <li><a href="#" data-filter=".html">HTML</a></li>
          <li><a href="#" data-filter=".js">JavaScript</a></li>
          <li><a href="#" data-filter=".flash">Flash</a></li>
        </ul>
        <div class="clear"> </div>

    <div id="works" class="isotope"> </div>

filter code:

// items filter
$('#works_filter a').live('click',function() {
    var selector = $(this).attr('data-filter');
    $('div#works').isotope({
        filter: selector,
        itemSelector: 'img.work',
        layoutMode: 'fitRows'
    });

$('#works_filter').find('a.selected').removeClass('selected');
alert('filter pressed');
$(this).addClass('selected');

return false;
});

appended content:

$(window).load(function(){

    $("#works").append('<a id="port" rel="nofollow" href="#"><img class="work html" src="images/photos/Gartner.jpg" alt="Gartner" /></a> <a id="port-2" rel="nofollow" href="#"><img class="work html" src="images/photos/MasterCard.jpg" alt="MasterCard" /></a> <a id="port-3" rel="nofollow" href="#"><img class="work js" src="images/photos/FYI.jpg" alt="FYI FreeScore.com" /></a> <a id="port-4" rel="nofollow" href="#"> <img class="work css" src="images/photos/IAMSC.jpg" alt="IAMS Daily Cats" /></a> <a id="port-5" rel="nofollow" href="#"><img class="work js" src="images/photos/PeoplesWM.jpg" alt="Peoples United Bank Wealth Managament" /></a>  <a id="port-6" rel="nofollow" href="#"> <img class="work js" src="images/photos/PeoplesFA.jpg" alt="Peoples United Bank Financial Advisors" /></a>');
    });