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