Обработчик событий jQuery не срабатывает при последовательных щелчках по переключателю выпадающего меню Bootstrap

Question

Когда пользователь открывает раскрывающийся список, я должен заполнять его из базы данных:

Для этого я решил зарегистрировать обработчик событий для кнопки, которая открывает раскрывающийся список:

$(document).on('click', '.schedulesDropdown', function() {
  alert("call api with ajax and populate dropdown with result")
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<button id="{{id}}" class="btn btn-primary dropdown-toggle schedulesDropdown" data-toggle="dropdown"></button>
<div class="dropdown-menu">
  stuff
</div>

Проблема в том, что он срабатывает только один раз.

Если я удаляю бутстрап, он работает как шарм:

$(document).on('click', '.schedulesDropdown', function() {
  alert("call api with ajax and populate dropdown with result")
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<button id="{{id}}" class="btn btn-primary dropdown-toggle schedulesDropdown" data-toggle="dropdown"></button>
<div class="dropdown-menu">
  stuff
</div>

Поскольку проблема в начальной загрузке, я не знаю, каков будет следующий шаг.

Answer 1

Добавьте событие onclick вместо доступа к нему через DOM и передайте это ключевое слово в качестве аргумента методу, вызываемому в событии. <button onclick=“return methodName(this)” >