Функция JQuery .click не работает в рельсах (со многими, возможно, не связанными ошибками)

Question

У меня есть довольно простой набор значков, которые при нажатии должны изменить значение скрытого поля и изменить цвет.

html / erb выглядит следующим образом:

<div class="md-form mb-4 justify-contents-center">
  <label>Urgency</label>
  <span class="clickable badge badge-pill badge-urgency badge-high inactive" id="urgency-high">High</span>
  <span class="clickable badge badge-pill badge-urgency badge-medium inactive" id="urgency-medium">Medium</span>
  <span class="clickable badge badge-pill badge-urgency badge-low inactive" id="urgency-low">Low</span>
  <span class="clickable badge badge-pill badge-urgency badge-nonurgent inactive" id="urgency-nonurgent">Non-Urgent</span>
  <%= hidden_field_tag :urgency, id: "urgency-field" %>
</div>

И мой JQuery выглядит так:

<script>
  $(document).ready(function() {
    console.log("THINGS");
    $('#badge-high').click(function(){
      console.log("HIGH THINGS");
      $('.badge-urgency').addClass('inactive');
      $('#badge-high').removeClass('inactive');
      $('#urgency-field').val("High");
    });
    $('#badge-medium').click(function(){
      $('.badge-urgency').addClass('inactive');
      $('#badge-medium').removeClass('inactive');
      $('#urgency-field').val("Medium");
    });
    $('#badge-low').click(function(){
      $('.badge-urgency').addClass('inactive');
      $('#badge-low').removeClass('inactive');
      $('#urgency-field').val("Low");
    });
    $('#badge-nonurgent').click(function(){
      $('.badge-urgency').addClass('inactive');
      $('#badge-nonurgent').removeClass('inactive');
      $('#urgency-field').val("Non-Urgent");
    });
    $('.mdb-select').materialSelect();
  });
</script>

Консоль показывает «ВЕЩИ», поэтому я знаю, что она достигает внутри JQuery, но «ВЫСОКИЕ ВЕЩИ» никогда не происходит, даже когда нажимается #badge-high.

Я получаю следующие ошибки консоли, но если я удаляю JQuery со страницы в целом, они все равно появляются, поэтому я почти уверен, что они не связаны.

Есть идеи, что можно сломать?

Answer 1

Вероятно, это связано с другими сценариями, которые вы включили в свой код. Пытались ли вы проверить порядок, в котором вы включили другие скрипты в свой HTML-код?

Иногда для правильного функционирования некоторые скрипты должны быть включены раньше других.