Slider not showing captions for generated clones

Question

I have this image slider that was build using bxslider which is supposed to show captions when the mouse hovers over the image. The code works just fine for images that I put in but there is a list of clones generated in the slider for which the captions don't work. I'm not sure how to get them working.

           $('.thisOne',this).hover(function() {        
    var title = $(this).attr('title');   
    if (title != undefined && ('' + title).length) {    
        $(this.parentNode).append('<div class="bx-caption"><span>' + title + '</span></div>');                       
    }               
    });  

The broswer generates a copy of the images with a class 'bx-clone' out the list and appends them the list of images such as the one below.

        <ul class="bxslider1">
          <li><img class="thisOne" img src="images/pic1.jpg" title="Lorem ipsum dsafkjhsdaflkhdsafkj"/></li>
          <li><img class="thisOne" src="images/pic2.jpg"     title="Lorem ipsum dsafkjhsdaflkhdsafkj" /></li>
          <li><img class="thisOne" src="images/pic3.jpg"     title="Lorem ipsum dsafkjhsdaflkhdsafkj" /></li>
          <li><img class="thisOne" src="images/pic4.jpg"     title="Lorem ipsum dslfakjds;lafkjds;lafkjg;oljdfgopi ds ogijugjdfoi" /></li>
          <li><img class="thisOne" src="images/pic5.jpg"     title="Lorem ipsum dslfakjds;lafkjds;lafkjg;oljdfgopi ds ogijugjdfoi" /></li>
          <li><img class="thisOne" src="images/pic7.jpg"     title="Lorem ipsum dslfakjds;lafkjds;lafkjg;oljdfgopi ds ogijugjdfoi" /></li>
        </ul>   

I don't know how to get the cpations to show up on top of the duplicate images. If it helps I wrapped my function inside the $(document).ready(); I'm sorry but I don't have a better way of explaining the code.

Answer 1

Here is your solution

What I have done is, used a custom attribute called slide and assigned unique slide numbers to the different images. And on hover try to find the cloned object with the same attribute.

Also your code kept appending the caption on each hover. It's not optimum, so added a check to see if caption is added already.

   $('img').hover(function() {        
   var title = $(this).attr('title');   
   var slideNo = this.getAttribute('slide');
   if (title != undefined && ('' + title).length) {    
     var captionAdded = $(this.parentNode).find('.bx-caption');
     if(captionAdded.length == 0){
        var imgObjs = $(this).parents('ul').find('img[slide='+slideNo + ']');
        for(var i=0; i<imgObjs.length; i++){
          $(imgObjs[i].parentNode).append('<div class="bx-caption"><span>' + title + '</span></div>');    
        }
     }
  }               
  });