Bootstrap-select не работает с партикулами HTMX

Я пытаюсь использовать Bootstrap-select с HTMX частичными элементами в Django. Когда определенный элемент изменяется, htmx возвращает частичный html, содержащий только выпадающий элемент, например:

<select id="myDropdown" class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

При первоначальной загрузке главной страницы, которая содержит CDN вместе с myDropdown, selectpicker работает нормально. Однако позже, когда myDropdown возвращается HTMX, selectpicker не работает, получая display: None !important. Это поведение точно такое же, как если бы при рендеринге частичного html CDN были недоступны для использования.

Если вместо class="selectpicker я использую $(function(){ $('#myDropdown').selectpicker();}); это действительно работает. Проблема теперь в том, что есть секунда, когда myDropdown не стилизован вообще, до того, как сработает JS функция.

Кто-нибудь знает, как исправить эту проблему или обойти ее хитрым способом?

Столкнулся с аналогичной проблемой, решил ее перезагрузкой селектора bootstrap-select в моем файле base.html:

htmx.on('htmx:afterSwap', function (event) {
    $('.selectpicker').selectpicker('reload');
})
Вернуться на верх