bxslider - hover with cloned element

Question

Hi im using bx slider to show my partners on site.

PHP code looks like this:

$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 im setting two logo - color and BW. On Hover i change image opacity to hide BW picture and show color one.

Here is jQuery code:

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);  
          });

Problem is that cloned items are not affected with this jquery function. What should i do to do it work on a cloned elements?

Answer 1

Try to use 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); 
});