javascript - JCarousel 克隆项目无法调用 javascript 函数

Question

我正在使用 JCarousel 来显示 5 个 div 的圆形轮播。所有 LI div 都有使用“onClick”事件调用 Javascript 函数的按钮。这些按钮都按预期工作，直到您到达最后一个(第五个)图像并且轮播再次继续第一个项目。新克隆的 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 函数，我们将不胜感激。如果这是重复的帖子，我深表歉意，但经过 2 个多小时的搜索后，我认为是时候提问了。谢谢!

Answer 1

我有同样的问题，它似乎是 jcarousel 中的错误。为了解决这个问题，我不得不将我的点击事件移到 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");
}