How to make jQuery code run every time for a site without reloading?

Question

JavaScript

I already asked a similar question ( https://toster.ru/q/471376 ), but I made some progress on this issue and other difficulties arose. There is jQuery code

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');
    });
}

which hangs the event on the next layout

<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>

These selects are found on every page of the site.

In order for the `click ()` function to work, I call it when the page loads

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

And in your component

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

But it works 100% only when I reload the page. With the usual "walking" along the routes, the selects work every other time.

Answer 1

Strange code, frankly.
initialization on page load is better like this:

$(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');
    });
});

what does your code do

$(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");
        }
    });

beyond my understanding. Do you understand? When should it be called?
the rest of your setTimeout and click(); absolutely not needed, IMHO ..
In general, try to write in words first what the javascript code should do. It will be easier for you and the locals :)