如何让 Slick Carousel 中的代码响应并正常工作？

Question

我正在使用这个预制的 Slick Carousel 代码。（从这里 http://kenwheeler.github.io/slick/ ）

我想做的是向每个 div 添加一个 'X'，这样它最终可以被编程为从轮播中删除该元素。这将取代 "Remove Slide" 按钮，所以我注释掉了它的代码。

错误：点击 X 没有反应。在 fiddle 中，我试图让它在单击时甚至显示警报，但这不起作用。

有谁知道如何让 X 按钮在单击时做出反应？此外，如何正确编码 X 按钮？

HTML

<body>

    <section id="features" class="blue">
        <div class="content">       
            <hr id="demos"/>
            <h2>Add & Remove</h2>
            <div class="slider add-remove">
                <!--<div><h3>1</h3></div>-->
            </div>

            <div class="buttons">
                <a href="javascript:void(0)" class="button js-add-slide">Add Slide</a>
                <a href="javascript:void(0)" class="button js-remove-slide">Remove Slide</a>
            </div>
        </div>
    </section>

</body>

CSS

.sliderX{
    cursor: pointer;
    position: relative;
    font-size: 20px;
    top:-40px;
    right:-50px;
    height: 20px;
    padding: 0 0 0 0;
}

JS

$(document).ready(function(){
    var slideIndex = 0;
    $('.add-remove').slick({
        slidesToShow: 3,
        slidesToScroll: 3
    });


    $('.js-add-slide').on('click', function() {
        slideIndex++;
        $('.add-remove').slick('slickAdd','<div><h3><a class="sliderX">X</a>' + slideIndex +
                               '</h3></div>');
    });

    $('.sliderX').on('click', function() {
        alert('Clicked');
    });

    /*Original Code
    $('.js-remove-slide').on('click', function() {
        $('.add-remove').slick('slickRemove',slideIndex - 1);
        if (slideIndex !== 0){
            slideIndex--;
        }
    });
    */

});

Answer 1

元素 $('.sliderX') 必须在 DOM 中才能绑定点击处理程序。绑定是在最初读入 JS 时发生的，因此 X 还不存在。

您可以将绑定事件的代码移动到另一个将 X 放入 DOM 的点击处理程序中，或者将点击处理委托给 是 [=20] 的事件=] 已经在 DOM 即。 ```

$('body').on('click', '.sliderX', function() { alert('Clicked'); });

```

这可能是更好的计划，b/c它不会创建过多的处理程序，而且如果添加 X 的事件是异步的，您也不会冒运行回到原始问题的风险.

如何让 Slick Carousel 中的代码响应并正常工作？

How to get code in Slick Carousel to respond and work properly?

javascript

jquery

carousel

slick.js