Why does the onclick event stop working when the screen orientation changes?

Question

JavaScript

Hello! There is a slick slider in which a carousel reviews (a standard situation). To reduce the size, I found a script that collapses a div (readmore.js was wildly furious with it, I found some kind of super simple script in general - but that's not the point)

So. When swiping on a slick, there is a function that makes the scrolltop to the top of the review, and collapses the divs with the text. It is framed through the standard slickslider handler

$('.wtwp-testimonials-slidelist-1').on('swipe', function(event, slick, direction) {});

Further the most interest and actually a question. In addition to the swipe, it is necessary that the same function be called when clicking on the arrows ($('.slick-arrows')) and the dots below ($('.slick-dots')) - I did not find anything more ingenious than to hang $(". slick-arrow").click(function(){...});

All this disgrace works fine both on the desktop and on phones. Until the screen rotates.

Debugged, hung a banal alert on $(".slick-arrow").click - everything is cool, the alert works. You turn the screen - it stops.

Why can this be so? All my scripts are executed after loading the DOM, that is, $ (document). ready (function ()) - maybe this is the trouble?

The site on which I did it: lavkado.ru

Answer 1

And this is what it all turned out to be. slick slider in the wp-testimonial-slider plugin was called with additional responsive arguments [...]
I understand that when the breakpoint is overcome, these page elements are removed and re-added. jquery can no longer find the old ones, and therefore the script is skipped. Well, in general, I still haven’t fully understood the logic, but by removing the adaptability, everything worked.

Answer 2

don't use click()
use on()

Answer 3

And it was just necessary to use delegation.