如何将单击事件附加到光滑的 JS 滑块下一个按钮答案

【问题标题】：How to attach click event to slick JS slider next button如何将单击事件附加到光滑的 JS 滑块下一个按钮
【发布时间】：2019-07-23 18:16:21
【问题描述】：

我正在尝试将 javascript 事件附加到光滑的滑块下一个和后退按钮。我尝试检查页面并查看它们的名称并在这些类上调用事件，但它无法识别点击事件。

这是我要调用的函数：

var i = 0;
$('.slick-next').click(function(){
    console.log('next clicked');
    i++;
    console.log(i);
    if (i==1) {
        $('#people').css('filter', 'none');
    }
})

我也尝试过使用'.slick-next::before'，但也没有用

【问题讨论】：

标签： javascript jquery

【解决方案1】：

需要为按钮的点击添加.on()方法。这是因为这些下一个和上一个箭头按钮是稍后由 slick.js 在 DOM 中添加的，并且 .on() 可以处理来自后代元素的事件，这些子元素会在以后添加到文档中。

$('body').on('click', '.slick-arrow', function () {
    alert('click working')
})

here is the codepen example

【讨论】：

【解决方案2】：

$('.slick-next').click(function(e){
  console.log(e.target);
  $('#people').css('filter', 'none');
})

【讨论】：

【解决方案3】：

$('button.slick-next').click(function(e){
   console.log(e.target);
   // Action here
});

【讨论】：

【解决方案4】：

我最终不得不访问正文，然后访问 slick-next 按钮，因为它是一个伪元素，并且在没有先说明它在哪里的情况下被 JS 发现。

【讨论】：