Question

我有一个无序的列表，如：

<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>

我正在使用jQuery Quicksand插件对该列表进行排序：

http://razorjack.net/quicksand/

问题是我在这些链接上使用jQuery（下面的代码只是一个重写的例子，可能无效）：

jQuery("li").hover(function() {
    jQuery(this).animate({opacity: 0.2}, 500);
}, function() {
    jQuery(this).animate({opacity: 1}, 500);
});

直到现在一切正常。

但是Quicksand在两个列表上运行，所以我正在动态创建第二个：

 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();
(...)

排序后（点击，例如“全部”链接）我的jQuery叠加/动画不起作用。我相信这是因为我的jQuery代码没有附加到动态“生成”的克隆列表中。如何解决？

Answer 1

您可以使用live()附加动画：

jQuery("li").live({
        mouseover:
           function() {
             jQuery(this).animate({opacity: 0.2}, 500);  
           },
        mouseout:
           function() {
             jQuery(this).animate({opacity: 1}, 500);
           }
       }
    );

这样，每个未来的li元素也会获得这些相同的事件。

jQuery访问克隆项目

1 个答案: