Кнопка внутри формы недоступна

Question

Я пытаюсь вызвать событие нажатия кнопки внутри формы, используя jQuery.

$(".switchLang").on("click", function(e) {
  console.log("Clicked!")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-inline" action="">
  <button type="button" class="btn mr-3 btn-link transparent switchLang">${{index.keys.lng}}$</button>
  <button type="button" class="btn mr-3 btn-outline-light">${{index.keys.login}}$</button>
  <button type="button" class="btn btn-primary">${{index.keys.getStarted}}$</button>
</form>

Вышеприведенная функция не вызывается!

После исследования я пробовал много решений, но ничего не получалось.Как добавление e.preventDefault(); внутри функции, также удалить .click и заменить на .on и так далее, но ничего не работает!

Я уже упоминал этот вопрос: здесь .

Спасибо.

---

Решено

Я дважды проверил свой код.HTML написан внутри скрипта типа text / template, и этот шаблон отображается перед кодом jquery.Спасибо.

Answer 1

Попробуйте это может помочь

$(document).on('click', '.switchLang', function (e) {
    console.log("Clicked!")
});

Answer 2

Вам нужно подождать, пока документ будет готов, прежде чем добавлять обработчик кликов, например:

   $(document).ready(function () {
       $('.switchLang').on('click', function (e) {

           console.log("Clicked!")
       });
    });

Answer 3

Вы можете попробовать

$(document).on("click",".switchLang",function (e) {
    console.log("Clicked!")
});