如何让脚本处理 Laravel Blade 中由 if-else 划分的元素

如何解决如何让脚本处理 Laravel Blade 中由 if-else 划分的元素

我有一个页面，使用 Laravel 的 @if @else 操作符（@if ($step == 1) html_code @else html_code）分为 3 个步骤。每个步骤都使用 Livewire 独立显示。此步骤之一使用使用 JQuery 制作的自制选项卡。一步之刃长这样：

<div class="tabs-b">
                        <div class="tabs-b__btns">
                            <div class="tabs-b__btn tabs-b__btn_active js--tab-btn" wire:click="deliveryConditionClick">
                                Фиксированная закупочная стоимость
                            </div>
                            <div class="tabs-b__btn js--tab-btn" wire:click="deliveryConditionClick">
                                Рассчитывать от&nbsp;объема закупки
                            </div>
                        </div>

                        <div class="tabs-b__tabs-wrapper">
                            <div class="tabs-b__tab">
                                <div class="input-b">
                                    <input type="text" class="input input-b__input js--hint-input js--num-mask" placeholder="Кол-во грамм за цену">
                                    <label class="input-b__label">Минимальная сумма заказа у поставщика на все товары</label>
                                </div>
                                <!-- input-b -->

                                <div class="input-b">
                                    <input type="text" class="input input-b__input js--hint-input js--num-mask" placeholder="Закупочная стоимость 1шт товара">
                                    <label class="input-b__label">Закупочная стоимость 1шт товара</label>
                                </div>
                                <!-- input-b -->

                                <div class="input-b">
                                    <div class="input-b__text">Позже при создании закупки на основании этих полей будет автоматически рассчитана цена для покупателя с учетом накрутки 16%. Из которых 4% – комиссия Баобум,12% – вознаграждение организатора закупки.</div>
                                </div>
                                <!-- input-b -->

                            </div>

                            <div class="tabs-b__tab" style="display: none">
                                <div>
                                    <div class="form-bordered-block">
                                        <div class="input-b input-b_duble">
                                            <div class="input-b__inner-wp input-b__inner-wp_long">
                                                <input type="text" class="input input-b__input js--hint-input" placeholder="Объем закупки (руб.)" value="10 000">
                                                <label class="input-b__label">Объем закупки (руб.)</label>
                                            </div>
                                            <div class="input-b__inner-wp">
                                                <input type="text" class="input input-b__input js--hint-input" placeholder="Шт. в закупке" value="10">
                                                <label class="input-b__label">Шт. в закупке</label>
                                            </div>
                                        </div>
                                        <div class="input-b-desc input-b-desc_black">Итого: 575 руб. за шт при сборе заказов на 11 500 руб.</div>
                                    </div>
                                    <!-- form-bordered-block -->

                                    <div class="form-bordered-block">
                                        <div class="input-b input-b_duble">
                                            <div class="input-b__inner-wp input-b__inner-wp_long">
                                                <input type="text" class="input input-b__input js--hint-input" placeholder="Объем закупки (руб.)">
                                                <label class="input-b__label">Объем закупки (руб.)</label>
                                            </div>

                                            <div class="input-b__inner-wp">

                                                <input type="text" class="input input-b__input js--hint-input" placeholder="Шт. в закупке">
                                                <label class="input-b__label">Шт. в закупке</label>
                                            </div>
                                        </div>
                                        <!-- input-b -->

                                        <div class="input-b-desc">При заполнении полей будет рассчитана ваша цена</div>
                                    </div>
                                    <!-- form-bordered-block -->
                                </div>

                                <div class="add-btn">
                                    <div class="add-btn__ico">
                                        <svg class="icon__pluse" width="10px" height="10px">
                                            <use xlink:href="#pluse"></use>
                                        </svg>
                                    </div>
                                    <span>Добавить условие поставки</span>
                                </div>
                            </div>
                        </div>
                    </div>

JQuery 部分如下所示：

$('.js--tab-btn').click(function (){
            var $btn = $(this),$block = $btn.closest('.tabs-b'),index = $btn.index();

            if($btn.hasClass('tabs-b__btn_active')) return;

            $block.find('.tabs-b__btn').removeClass('tabs-b__btn_active');
            $btn.addClass('tabs-b__btn_active');

            $block.find('.tabs-b__tab').hide().eq(index).fadeIn();

        });

如果我把 HTML 部分放在第一步 - 它工作正常。但是如果我把它放在接下来的步骤中 - JQuery 不起作用并且选项卡变得不活动。如果我使用 Livewire 发出自定义事件 - 它也不起作用。至少在第二步。我应该怎么办？如何让脚本在一个刀片文件的步骤上工作？