I have a unordered list like:
<ul>
<li data-id="1" data-value="text"> My text </li>
<li data-id="2" data-value="movie"> My movie </li>
<li data-id="3" data-value="text"> Another text </li>
<li data-id="4" data-value="picture"> Picture </li>
</ul>
And I'm using jQuery Quicksand plugin to sort that list:
http://razorjack.net/quicksand/
The problem is I'm using jQuery on these links (code below is just an rewritten example, may not work):
jQuery("li").hover(function() {
jQuery(this).animate({opacity: 0.2}, 500);
}, function() {
jQuery(this).animate({opacity: 1}, 500);
});
And till now everything works fine.
But Quicksand operates on TWO lists, so I'm creating the second one dynamically:
jQuery('document').ready(function(){
//create a clone of the full list of elements and extract 'li' elements
//in order to use it as the 'second' list for quicksand
var cache_list = jQuery('ul').clone();
//Add on click event handler to the 'ALL' button
jQuery('ul.portfolio-terms li a[data-value=All]').click(function(e) {
//Call quicksand on the original works_list list(the one visible to the user)
//pass to it all the 'li' elements from the cached clone
//since we want to display them all
jQuery('.portfolio-list').quicksand( cache_list.find('li'), {
duration: 500,
});
e.preventDefault();
(...)
And after sorting (clicking, for example "All" link) my jQuery overlays/animations doesn't work. I believe that's because my jQuery code is not attached to dynamically "produced" clo开发者_如何学运维ned list. How to fix that?
You could attach your animation with live():
jQuery("li").live({
mouseover:
function() {
jQuery(this).animate({opacity: 0.2}, 500);
},
mouseout:
function() {
jQuery(this).animate({opacity: 1}, 500);
}
}
);
That way, every future li
element will also get these same events.
精彩评论