Блог

Я пытаюсь вызвать файл js из шаблона блейда, поэтому у меня есть основной шаблон блейда с: @stack('custom-scripts')

Затем в дочернем шаблоне я помещаю файл js с @push('custom-scripts')

Скрипт заставляет начальную аккордеонную гармошку менять свой значок.

• Если сценарий находится внутри <script> тега, написанного непосредственно в шаблоне блейда, он работает.
• Если сценарий вызывается, событие не работает $(".collapse").on('show.bs.collapse'...

Неработающий пример:

 @push('custom-scripts')
        //This line calls the script below, but the event on show.bs.collapse will not fire
        <script type="text/javascript" src="{{ URL::asset ('js/accordion-details.js') }}"></script>
@endpush
 

 //accordion-details.js
$(document).ready(function(){
    $(".collapse.show").each(function(){
        $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
    });

    //THIS IS NOT FIRING
    $(".collapse").on('show.bs.collapse', function(){
        console.log('open collapse');
        $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
    }).on('hide.bs.collapse', function(){
        console.log('hide collapse');
        $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
    });
});
 

Рабочий пример:

 @push('custom-scripts')
    <script>
        $(document).ready(function(){
            $(".collapse.show").each(function(){

                $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
            });

            //FIRING AND WORKING AS EXPECTED
            $(".collapse").on('show.bs.collapse', function(){
                console.log('open collapse');
                $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
            }).on('hide.bs.collapse', function(){
                console.log('hide collapse');
                $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
            });
        });
    </script>
@endpush