Почему после HTMX hx-get отображается несколько модалов bootstrap?

У меня есть Django-страница, использующая HTMX для заполнения некоторых вкладок (Members, Events и Contacts), оформленных в стиле bootstrap. 'hx-get' используется для загрузки нужного содержимого страницы в DOM. На странице Members у меня есть кнопка, при нажатии на которую открывается модальная форма bootstrap для добавления пользователя.

Проблема заключается в том, что количество раз, которое модальное окно отображается в DOM при нажатии на кнопку, соответствует количеству загрузок содержимого Members. Если страница Members отображается дважды (переход с вкладки Members на вкладку Events, затем обратно на Members), в DOM появляется два модала и так далее.

Сначала я подумал, что это может быть вызвано тем, что модальная форма также отображается с помощью hx-get. Однако я заменил модальную форму базовой модальной формой на той же странице, и проблема сохранилась.

Почему только модальная страница отображается несколько раз? Страница членов клуба отображается только один раз.

Код табуляции:

<div class="container">
 <div class="row">
  <div class="nav flex-column nav-pills me-3 col" role="tablist" aria-orientation="vertical" 
    id="tabs" hx-target="#tab-contents" _="on htmx:afterOnLoad take .active for 
      event.target">
      <button type="button" id="members-btn" role="tab" aria-controls="tab-contents" aria- 
       selected="true" hx-get="{% url 'members' %}" class="nav-link active">
        Members
      </button>
      <button type="button" role="tab" aria-controls="tab-contents" aria-selected="false" hx- 
       get="{% url 'events' %}" class="nav-link">
        Events
      </button>
      <button type="button" role="tab" aria-controls="tab-contents" aria-selected="false" hx- 
       get="{% url 'contact_log' %}" class="nav-link">
        Call Log
      </button>
      <button type="button" role="tab" aria-controls="tab-contents" aria-selected="false" hx- 
       get="{% url 'files' %}" class="nav-link">
        Files
      </button>

 </div>

  <div class="tab-content col-10" id="tab-contents" role="tabpanel" hx-get="{% url 'members' 
  %}" hx-trigger="load">

  </div>

 </div>
</div>

Страница участника:

Вернуться на верх