Не работает сторонний jQuery скрипт

[night_music]

Всем доброе время суток.
Столкнулся с такой проблемой.
Написал небольшой скрипт , при котором по нажатии на ссылку - то скрывает , то разворачивает текст.
Так вот -работает он через раз. Не понятно с чем это связано.
На странице подключил библиотеку и отдельный файл js в head
<script src="{$mse.template}/js/jquery-3.3.1.min.js"></script>
<script src="{$mse.template}/js/main.js"></script>

Вот код ссылки :

$(function(){

     $('.link__open').click(function(e) {

      e.preventDefault();

      $('.box_hide').toggleClass('box_open');

      if ($('.box_hide').hasClass('box_open')) {

         $('.link__open').text('Свернуть текст ↑');

      }else{

         $('.link__open').text('Развернуть текст ↓');

      }

    });

});

 

[MSE-Script]

1) В файле /assets/mse.js уже скомпилированна последняя версия jquery, второй раз подключать не нужно
2) Использовать функцию click не самая лучшая практика, используйте функцию .on('click'). Она занимает меньше памяти, работает быстрее и позволяет обрабатывать динамические элементы.
3) Сайт построен как SPA-приложение, при переходе по страницам ваш скрипт отрабатывать не будет, так как элемент, на который установлен обработчик после перехода существовать не будет. Для корректной обработки такого события нужно использовать "всплытия":

$(document).on('click', '.link__open', function () {
    console.log('hello night_music')
})

4) Тернарные операторы можно переписать более лаконично:

var text = $('.box_hide').hasClass('box_open') ? 'Свернуть текст ↑' : 'Развернуть текст ↓';
$('.link__open').text(text);

Конечный результат примерно такой (написан в поле для сообщения, не тестировался):

$(document).on('click', '.link__open', function (e) {
e.preventDefault();
$('.box_hide').toggleClass('box_open');
var text = $('.box_hide').hasClass('box_open') ? 'Свернуть текст ↑' : 'Развернуть текст ↓';
$('.link__open').text(text);
})

 

[night_music]

Спасибо за ответ, сейчас буду тестить

 

[night_music]

Ещё раз Доброе время суток
Подскажите пожалуйста,я не совсем понимаю как это работает....
на сайте установил слайдер , сделал всё по инструкции. При загрузке страницы -слайдер работает.
Если я перехожу на другую страницу, а потом возвращаюсь на главную со слайдером -он уже не работает.
Вы мне помогли с моим самописным кодом. А как быть с кодом от плагина?

$('.slider').slick({
dots: false,
slidesToShow: 4,
slidesToScroll: 1,
prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-angle-left "></i></button>',
nextArrow: '<button type="button" class="slick-next"><i class="fas fa-angle-right "></i></button>',
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 4
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 700,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 376,
settings: {
slidesToShow: 1
}
}
]
});

 

[ovozz]

@night_music, https://mse-script.ru/forum/threads/js-storonie-skripty.213/post-1686