JCarousel клонированные элементы не могут вызвать функцию javascript

Question

Я использую JCarousel для отображения круговой карусели из 5 разделов. У всех разделов LI есть кнопки, которые вызывают функцию Javascript, используя событие onClick. Кнопки работают по назначению, пока вы не достигнете последнего (пятого) изображения, и карусель снова продолжит первый элемент. Новые клонированные элементы li теперь не могут вызвать функцию javascript.

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

Любая помощь по получению клонированных предметов для возможности вызова функции js будет принята с благодарностью. Приносим извинения, если это дубликат, но после двухчасового поиска я понял, что пришло время спросить. благодаря!

Answer 1

У меня была такая же проблема, это, похоже, ошибка в jcarousel. Чтобы обойти это, мне пришлось переместить событие click в функцию initCallback. Например:

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