JCarousel cloned items unable to call javascript function

Question

I'm using JCarousel to display a circular carousel of 5 divs. All of the LI divs have buttons that call a Javascript function using the "onClick" event. The buttons all work as intended, until you reach the last (fifth) image and the carousel continues with the first item again. The new cloned li items are now unable to call the javascript function.

//SAMPLE LIST ITEM 
<li>
    <div class="carousel-item">
       <div id="item01">
           <a href="javascript:void(0)" id="btn-01" onClick="itemsData('http://google.com')">Click Me</a>
         </div>
       </div>
  </li>
 //SAMPLE CALLED FUNCTION
var itemsData = function (uri) 
{
    console.log("LINK CLICKED");
}

Any help on getting the cloned items to be able to call the js function would be greatly appreciated. My apologies if this is a duplicate post but after 2+ hours of searching I figured it was time to ask. thanks!

Answer 1

I had the same issue, it appears to be a bug in jcarousel. To get around it I had to move my click event into the initCallback function. Eg:

        jQuery('#teaserHomePageItems').jcarousel({
            initCallback: teaserHomePageItems_initCallback
        });


    function teaserHomePageItems_initCallback(carousel) {
        jQuery('.jcarousel-control a').bind('click', function () {
            //alert(jQuery(this).attr('id'));
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('id')));
        DoWork(jQuery(this).attr('id'));//passing the id of the element to DoWork allows me to do anything with it.
            return false;
        });


function DoWork(idName)
{
        jQuery('#' + idName).attr("src", "someimage.png");
}