bxslider - 懸停與克隆元素

Question

嗨即時通訊使用bx滑塊來顯示我的合作伙伴網站。

PHP代碼如下所示：

$data .= '<div class="twocolor"><a href="'.$client['link'].'" class="thumbnail"> 
<img class="bw img-responsive" src="'.$client['image_bw'].'" alt=""> 
<img class="color img-responsive" style="display:none;" src="'.$client['image'].'" alt=""> 
</a></div>'; 

Basicly即時調節兩個標誌 - 顏色和BW。在懸停我更改圖像不透明隱藏BW圖片和顯示顏色之一。

這裏是jQuery代碼：

jQuery('.twocolor').hover( 
      function() { 
       jQuery(this).find('img.bw').stop().animate({ 'opacity': '0' }, 400); 
      }, 
      function() { 
       jQuery(this).find('img.bw').stop().animate({ 'opacity': '1' }, 400); 
      }); 

問題是，克隆項目不會影響與這個jQuery功能。我應該怎麼做才能在克隆的元素上工作？

Answer 1

嘗試使用on()：

$(document).on("mouseenter", ".twocolor", function(e) { 
    jQuery(this).find('img.bw').stop().animate({ 'opacity': '0' }, 400); 
}); 

$(document).on("mouseleave", ".twocolor", function(e) { 
    jQuery(this).find('img.bw').stop().animate({ 'opacity': '1' }, 400); 
});