How to attach click event to slick JS slider next button

Question

I'm trying to attach a javascript event to the slick slider next and back buttons. I've tried inspecting the page and seeing what they're called and calling the event on those classes but it doesn't recognize the click event.

Here is the function I'm trying to call:

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

I've tried using '.slick-next::before' as well and that didn't work either

Answer 1

Need to add .on() method for the click of the button. That's because these next and previous arrow buttons are added later in the DOM by slick.js, and .on() can process events from descendant elements that are added to the document at a later time.

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

here is the codepen example

Answer 2

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