Как заставить jQuery код срабатывать каждый раз для сайта без перезагрузки?

Question

[nastya_zholudeva]

Уже задавала подобный вопрос (https://toster.ru/q/471376), однако немного продвинулась в этом вопросе и возникли другие трудности. Есть jQuery код,

function click() {
    $('.select_list_current').on('click', function(){
        // alert(1);
        $(this).parent('.select_list_wrapper').toggleClass('open');
        $(this).parent().find('.select_list').slideDown("slow");
    });

    $(document).on('click',function (event) {
        if ($(event.target).closest('.select_list_wrapper').length == 0 && $(event.target).attr('id') != 'select_list_current') {
            $('.select_list_wrapper.open').toggleClass('open');
            $(this).parent().find('.select_list').hide("slow");
        }
    });


    $('.select_list_radio').on('click', function(){
        var current = $(this).find('label span').text();
        $(this).parents('.select_list_wrapper').find('.select_list_current .select_list_current_item').text(current);
        $(this).parents('.select_list_wrapper').removeClass('open');
        $(this).parents('.select_list_wrapper').find('.select_list').css('display', 'block');
    });
}

который навешивает событие на следующую верстку

<div class="selected_relative">
                    <div class="select_list_wrapper ">
                        <div class="select_list_current">
                            <span class="label">Сортировать:</span>
                            <span class="select_list_current_item">По популярности</span>
                        </div>
                        <div class="select_list">
                            <div class="select_list_radio"><input type="radio" id="by_popular" name="sort_list" checked><label for="by_popular"><span>По популярности</span> </label></div>
                            <div class="select_list_radio"><input type="radio" id="by_price" name="sort_list"><label for="by_price"><span>По цене</span> </label></div>
                            <div class="select_list_radio"><input type="radio" id="by_date" name="sort_list"><label for="by_date"><span>По новизне</span> </label></div>
                        </div>
                    </div>
                </div>

Данные селекты встречаются на каждой страницы сайта.

Для того, чтобы функция `click ()` сработала я ее вызываю при загрузке страницы

$(window).load(function() {
 click();
});

И в своем компоненте

updated() {
            this.$nextTick(function () {
                setTimeout(() => {
                    click();
                }, 1000)
            })
        },

Но срабатывает это в 100% только когда я страницу перезагружаю. При обычном "гулянии" по маршрутам селекты срабатывают через раз.

Comments

[Андрей Хохлов]

Почему в тегах Vue, а в тексте вопроса лапша из jQuery?

[nastya_zholudeva]

Андрей Хохлов, потому что этот код работает в связке с vue js.

Вот этот кусочек кода относится именно к vue js

updated() {
            this.$nextTick(function () {
                setTimeout(() => {
                    click();
                }, 1000)
            })
        },

[Андрей Хохлов]

nastya_zholudeva, жесть какая.

Answer 1

[Danil Sapegin]

Странный код, откровенно говоря.
инициализация при загрузке страницы вот такая лучше:

$(document).ready(function(){
    $(document).on('click', '.select_list_current', function(){
        // alert(1);
        $(this).parent('.select_list_wrapper').toggleClass('open');
        $(this).parent().find('.select_list').slideDown("slow");
    });

    $('.select_list_radio').on('click', function(){
        var current = $(this).find('label span').text();
        $(this).parents('.select_list_wrapper').find('.select_list_current .select_list_current_item').text(current);
        $(this).parents('.select_list_wrapper').removeClass('open');
        $(this).parents('.select_list_wrapper').find('.select_list').css('display', 'block');
    });
});

что делает ваш код

$(document).on('click',function (event) {
        if ($(event.target).closest('.select_list_wrapper').length == 0 && $(event.target).attr('id') != 'select_list_current') {
            $('.select_list_wrapper.open').toggleClass('open');
            $(this).parent().find('.select_list').hide("slow");
        }
    });

за гранью моего понимание. А вы сами понимаете? В какой момент должен он вызываться?

остальные ваши setTimeout и click(); совершенно не нужны, имхо..

А вообще, попробуйте словами сначала написать что должен делать яваскрипт код. Станет проще и вам и местным :)

Comments

[nastya_zholudeva]

Danil Sapegin
Код писала не я, а верстальщик :) Я его теперь только правлю для нужд проекта :) И в верстке он как бы рабочий. Но после подгрузки данных с сервера и создания сайта без перезагрузки, он малость отказывается нормально функционировать.

А по теме: Код должен по клику на селектор "Показывать по" или "Сортировать" показывать окошко (как справа на скрине)


setTimeout использую чтобы vue js успел построить DOM (хотя может это и не правильно или бесполезно).

[Danil Sapegin]

nastya_zholudeva, в проекте используется и vue и jquery?
У vuejs должен быть какой-то callback, как у jquery, чтобы выполнить код зависящий от него. Поищите в документации..
Соот-но таймаут не нужен.

Но код должен быть по сути простейший, что-то в духе того, что я писал выше..

[nastya_zholudeva]

Danil Sapegin, да и vue и jquery. Спасибо за советы, но пока шерстение документации мне не помогло :(

[Danil Sapegin]

Я бы вам посоветовал переписать с нуля это.. быстрее и проще будет, имхо

[nastya_zholudeva]

Danil Sapegin, уже всплывают такие мысли((((