Как условно загрузить файлы javascript на основе переключаемых вкладок?

Question

Я хочу, чтобы, в зависимости от выбранного радио, чтобы JavaScript работал, связанный с радио, работал, а когда он не выбран или не выбран, не работал.

HTML для вкладок и радио:

<nav>
    <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active no-decoration" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Video</a>
        <a class="nav-item nav-link no-decoration" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Tweet</a>
    </div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

        <div class="card-body">
            CHOOSE RADIO

            <form id="selectForm">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <label class="custom-control custom-radio in active">
                            <input type="radio" name="distTravel" value="Ontario" class=" no-decoration" data-id="onlyON" />
                            <span class="custom-control-indicatore"></span>
                            <span class="custom-control-description">You</span>
                        </label>
                    </li>
                    <li class="nav-item">
                        <label class="custom-control custom-radio">
                            <input type="radio" name="distTravel" value="NA" class=" no-decoration" data-id="onlyNA" />
                            <span class="custom-control-indicator"></span>
                            <span class="custom-control-description">Someone else</span>
                        </label>
                    </li>
                </ul>
            </form>

            <div class="tab-content in active">
                <div class="card-block tab-pane active" id="onlyON">
                    TEXT
                </div>

                <span class="token"></span>
                <% end %>
                    <% end %>
            </div>
            <div class="card-block tab-pane" id="onlyNA">

            </div>

        </div>
    </div>

</div>
</div>
<div class="tab-pane-1 fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    <div class="card-body">

        CHOOSE RADIO
        <form id="selectForm">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <label class="custom-control custom-radio">
                        <input type="radio" name="distTravel-2" value="Ontario-2" class="no-decoration" data-id="onlyON-1" />
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">You</span>
                    </label>
                </li>
                <li class="nav-item">
                    <label class="custom-control custom-radio">
                        <input type="radio" name="distTravel-2" value="NA-2" class="no-decoration" data-id="onlyNA-1" />
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Someone else</span>
                    </label>
                </li>
            </ul>
        </form>

        <div class="tab-content-2 in active">
            <div class="card-block tab-pane-1 active" id="onlyON-1">

                TEXT
            </div>

            <span class="token"></span>

            <div class="card-block tab-pane-1" id="onlyNA-1">
            </div>
            <% end %>
                <% end %>
        </div>
    </div>
</div>

Теги Javascript:

<%= javascript_include_tag "stripe" %>
<%= javascript_include_tag "stripe-a" %>
<%= javascript_include_tag "stripe-2" %>
<%= javascript_include_tag "stripe-2-a" %>

Например:

Если выбрано радио [data-id="onlyON"], будет загружено <%= javascript_include_tag "stripe" %>. Затем, когда выбран [data-id="onlyON-1"], <%= javascript_include_tag "stripe" %> будет выгружен, а <%= javascript_include_tag "stripe-a" %> будет загружен и так далее, и так далее

Answer 1

Я окружил код полосы js функциями щелчка. работает. при нажатии на радио или вкладку (в зависимости от навигации по форме) js-код будет «переключаться». это работает при переходе назад и на четвертое между переключениями функций.

Все решено сейчас и не было проблем из моих тестов

Answer 2

Нет простого способа выгрузить / отключить тег скрипта после его добавления в документ; особенно если это сторонний скрипт, такой как Stripe, а не тот, который вы можете легко редактировать самостоятельно.

Вместо этого я разбил бы проблему на несколько документов. Если тело каждой вкладки включает в себя iframe, а каждый iframe содержит файл Stripe JS и компоненты формы, о которых он заботится, вы изолируете каждый сценарий Stripe от своего собственного документа, и они не должны мешать друг другу.