jQuery访问克隆项

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

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

到目前为止，一切都很顺利

但是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代码没有附加到动态“生成”的克隆列表。如何修复此问题？

您可以使用以下内容附加动画：

这样，每个未来的

li

元素也将获得相同的事件

 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("li").live({
        mouseover:
           function() {
             jQuery(this).animate({opacity: 0.2}, 500);  
           },
        mouseout:
           function() {
             jQuery(this).animate({opacity: 1}, 500);
           }
       }
    );