jQuery的訪問克隆項目

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流沙插件來排序該列表：

http://razorjack.net/quicksand/

的問題是我使用這些鏈接上的jQuery（下面的代碼只是一個重寫的例子，可能無法正常工作）：

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

直到現在一切正常。

但流沙上的兩個列表進行操作，所以我創建動態的第二個：

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元素也將得到這些相同的事件。