javascript – 如何重新加载光滑(滑块/轮播)jQuery插件？

我有2个具有相同功能的按钮,即从API获取数据然后转换为html然后使用jQuery将其附加到< div>.最后,使用 slick jQuery插件显示它,将HTML元素显示为滑块.

但是,单击第一个按钮后,如果我单击第二个按钮(反之亦然),光滑(滑块)将不再起作用.

Javascript代码：

$(document).ready(function(){

    /*
    Description  : Handle Day Button Event
    */
    $('.dayList').on("click",function(event)
    {
            var dayChild = $(this).attr('id');

            //::refresh day lline
            $('.hour-to-hour-line').empty();    
            getHourList(dayChild,function()
            {

                /* 
                The Slick
                */
                $('.hour-to-hour-line').slick({
                  dots: false,infinite: false,speed: 1000,slidesToShow: 6,slidesToScroll: 1,focusOnSelect: true,arrows: false,slickSetoption: true
                }); 
          });   
    });
});

HTML代码：

<div id="monday" class="dayList" data-daycount = "1" tabindex="1"> Monday </div>
<div id="tuesday" class="dayList" data-daycount = "2" tabindex="2"> Tuesday </div>
<br/>
<div id="hour2" class="hour-to-hour-line"></div>

Javascript代码,getHourList()函数：

function getHourList(day,callback)
{
    //::convert day to dayCount
    var dayCount = 0;
    switch(day) {
        case "monday":
            dayCount = 1;
            break;
        case "tuesday":
            dayCount = 2;
            break;      
    }

    //::fetch data from API
    jQuery.ajax({
        type: 'GET',url: 'http://localhost/api/1.0/schedule/items?day='+dayCount,dataType: 'json',beforeSend: function (xhr) {
            xhr.setRequestHeader ("Authorization","Basic WS8fkn5344WN8==");
        },success: function (data) 
            {
                //::refresh <div class='hour-to-hour-list'> template
                $('.hour-to-hour-line').empty();                

                //data deFinition
                var iCounter_1          = 1;
                var iCounter_2          = 1;
                var iCounter_2_next   = 1;
                var timer = [];

                //::exctract time from array=>data
                jQuery.each( data.item,function( key,val ) 
                {                                   
                    timer[iCounter_1] = val.time;       
                    iCounter_1++;           
                });

                //::exract time from array=>timer
                jQuery.each( data.item,val ) 
                {                   
                    var time         = val.time;        
                    var parent_id = "hour_"+iCounter_2;
                    var hour_id    = "this_hour_"+iCounter_2;
                    var next         = iCounter_2 + 1;

                    $html = 
                    "<div id="+parent_id+" class='fl hour-focus'>"+
                        "<div id="+hour_id+" class='fl kurohige-prev jaman' data-time="+time+">"+time+"-"+timer[next]+"</div>"+
                        "<div class='fl line-0'></div>"+                    
                    "</div>";

                    $('.hour-to-hour-line').append($($html));       
                    iCounter_2++;       

                });
                if (callback)
                {
                    callback();
                }
            }
    });
}

有人有解决方案吗？

解决方法

这是工作代码

tested for slick version 1.8.1

$('#slick-slider').slick('refresh');