JQuery скрыть на загрузке не работает

Question

Приложение Rails 5.1 с использованием jquery-rails (загрузка jQuery 1.12.4). У меня есть функция, включенная в заголовок страницы, которая работала. Я исправил отсутствующую ошибку функции файла JS, не связанную с этим, и теперь она выглядит правильно во время загрузки, а затем переворачивается (похоже, во время загрузки значков в консоли Rails). Если я вызываю ошибку отсутствующего метода (в JS-проверке на стороне клиента), то этот код работает правильно, что означает, что у меня есть еще кое-что.

Как только это перевернуто, .togglebutton не работает (это исправлено с помощью комментария Джоша ниже)

Такое поведение можно увидеть в прямом эфире здесь: https://www.patchvault.org/lodges

Функция:

$(document).ready(function() {
  $('.nni').toggleClass('hidden');
  $('.togglebutton').click(function() {
    $('.nni').toggleClass('hidden');
    $('.togglebutton').toggleClass('nodisplay');
  });
});

Обновленная функция после комментариев Джоша ниже (и других поисков SO):

$(document).ready(function () {
  $(window).load(function () {
    $('.nni').toggleClass('hidden');
    $(document).on('click', '.togglebutton', function() {
      $('.nni').toggleClass('hidden');
      $('.togglebutton').toggleClass('nodisplay');
    });
  });
});

Код кнопки переключения:

<div id="button_functions">
    <a class="togglebutton nodisplay" href="javascript:;">Hide No Known Issue Lodges (16)</a>
    <a class="togglebutton" href="javascript:;">Show No Known Issue Lodges (16)</a>
  </div>

соответствующий CSS:

.hidden,
.nodisplay { display: none; }

LI (пример):

<ul class="lodge-list">
  <li class="lodge nni">
      <a href="/lodges/2a-trenton"><img alt="No known issues for 2A" style="width: 200px;" src="/assets/[e-mail]"></a>

    <p class="lodge-name">
      <a href="/lodges/2a-trenton"><b>2</b> Trenton</a><br>
      <span>
        (2A)
      </span>
    </p>
  </li>
  <li class="lodge ">
        <a href="/lodges/2-5a-ntiasohen-gattopuin"><img alt="2.5 Ntiasohen Gattopuin" class="featured-image-home" src="https://patchvault.s3.amazonaws.com/uploads/issue/image/4114/list_Fish_Flap_1992.jpg?X-Amz-Expires=600&amp;X-Amz-Date=20180711T120316Z&amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=AKIAIOPOW7QY5HS62KZA/20180711/us-east-1/s3/aws4_request&amp;X-Amz-SignedHeaders=host&amp;X-Amz-Signature=19a5afd4d18ccb7951c756a4916aef200026ac447f45452ca66427480a6f0d27"></a>
      <!-- <= link_to image_tag(lodge.issues.first.image_url(:list)),
            lodge_path(
              lodge.slug
            ) %> -->

    <p class="lodge-name">
      <a href="/lodges/2-5a-ntiasohen-gattopuin"><b>2.5</b> Ntiasohen Gattopuin</a><br>
      <span>
        (2.5A)
      </span>
    </p>
  </li>
  [ Other lodges are one of these two styles ]
</ul>

который в настоящее время работает. Если я снова ввожу консольную ошибку (отсутствует файл проверки форм на стороне клиента), это работает. Но должно быть что-то еще, что я делаю здесь не так, чтобы вызвать это. Какие-нибудь мысли?

Answer 1

Итак, способ, которым я в конечном итоге смог решить эту проблему, был более простым, чем что-либо еще:

У меня был рельс ERB, который устанавливает "nni" как набор классов "nni hidden". Таким образом, оба эти класса применяются при загрузке страницы. Оттуда JS проще:

$(document).ready(function () {
  $(document).on('click', '.togglebutton', function() {
    $('.nni').toggleClass('hidden');
    $('.togglebutton').toggleClass('nodisplay');
  });
});

Вероятно, способ сделать это проще / чище, но это работает.