开发者

jQuery accessing cloned item

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜