Как реализовать функцию JavaScript в элементе HTML DOM HTML <select>, загруженном из AJAX

Question

Я пытаюсь получить форму редактирования HTML, в которой у меня есть тег выбора с именем класса class = "selectpicker", для которого мне нужно загрузить "bootstrap-select.js" после формы. Тег формы работал нормально, если я назвал его с той же страницы. Но теперь, когда я пытаюсь вызвать его с помощью Ajax, когда нажата кнопка редактирования, свойство JavaScript не работает с тегом, так как оно загружается после запуска вышеуказанного файла JavaScript в начале. Как я могу решить эту проблему?

<select 
  class="selectpicker"  
  name="keyword[]" 
  id="keyword[]" 
  data-placeholder="Start typing... " 
  style="width: 100%;" 
  multiple  
  required
>
  <option>Dance</option>
  <option>Music</option>
  <option>Sports</option>
  <option>Poster</option>
</select>

Answer 1

Событие 'change' будет всплывать через DOM. Я полагаю, вы помещаете ваш извлеченный HTML в какой-то контейнер, да? Поместите слушатель события 'change' в контейнер:

container.addEventListener('change', function(e){
    if (e.target.tagName == 'select' && e.target.classList.contains('selectpicker'))
        doSomething();
});