title: jQuery hide onLoad not working
body: <p>Rails 5.1 App, using jquery-rails (loading jQuery 1.12.4). I have a function included in the header of a page that was working. I fixed a missing JS file function error unrelated to this and now it looks right while loading and then flips (looks to be at the time it loads favicons in the Rails console). If I cause the missing method error (in a client side validation JS) then this code works properly, which means there's something else afoot to me.</p>
  
  <p><em>Once it's flipped, the <code>.togglebutton</code> doesn't function (this fixed with Josh's comment below)</em></p>
  
  <p>This behavior can be seen live here: <a href="https://www.patchvault.org/lodges" rel="nofollow noreferrer">https://www.patchvault.org/lodges</a></p>
  
  <p>The function:</p>
  
  <pre><code>$(document).ready(function() {
    $('.nni').toggleClass('hidden');
    $('.togglebutton').click(function() {
      $('.nni').toggleClass('hidden');
      $('.togglebutton').toggleClass('nodisplay');
    });
  });
  </code></pre>
  
  <p>Updated function after Josh's comments below (and other SO searching):</p>
  
  <pre><code>$(document).ready(function () {
    $(window).load(function () {
      $('.nni').toggleClass('hidden');
      $(document).on('click', '.togglebutton', function() {
        $('.nni').toggleClass('hidden');
        $('.togglebutton').toggleClass('nodisplay');
      });
    });
  });
  </code></pre>
  
  <p>Toggle Button code:</p>
  
  <pre><code>&lt;div id="button_functions"&gt;
      &lt;a class="togglebutton nodisplay" href="javascript:;"&gt;Hide No Known Issue Lodges (16)&lt;/a&gt;
      &lt;a class="togglebutton" href="javascript:;"&gt;Show No Known Issue Lodges (16)&lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>relevant CSS:</p>
  
  <pre><code>.hidden,
  .nodisplay { display: none; }
  </code></pre>
  
  <p>LI (example):</p>
  
  <pre><code>&lt;ul class="lodge-list"&gt;
    &lt;li class="lodge nni"&gt;
        &lt;a href="/lodges/2a-trenton"&gt;&lt;img alt="No known issues for 2A" style="width: 200px;" src="/assets/no_known_issues@2x.png"&gt;&lt;/a&gt;
  
      &lt;p class="lodge-name"&gt;
        &lt;a href="/lodges/2a-trenton"&gt;&lt;b&gt;2&lt;/b&gt; Trenton&lt;/a&gt;&lt;br&gt;
        &lt;span&gt;
          (2A)
        &lt;/span&gt;
      &lt;/p&gt;
    &lt;/li&gt;
    &lt;li class="lodge "&gt;
          &lt;a href="/lodges/2-5a-ntiasohen-gattopuin"&gt;&lt;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;amp;X-Amz-Date=20180711T120316Z&amp;amp;X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;amp;X-Amz-Credential=AKIAIOPOW7QY5HS62KZA/20180711/us-east-1/s3/aws4_request&amp;amp;X-Amz-SignedHeaders=host&amp;amp;X-Amz-Signature=19a5afd4d18ccb7951c756a4916aef200026ac447f45452ca66427480a6f0d27"&gt;&lt;/a&gt;
        &lt;!-- &lt;= link_to image_tag(lodge.issues.first.image_url(:list)),
              lodge_path(
                lodge.slug
              ) %&gt; --&gt;
  
      &lt;p class="lodge-name"&gt;
        &lt;a href="/lodges/2-5a-ntiasohen-gattopuin"&gt;&lt;b&gt;2.5&lt;/b&gt; Ntiasohen Gattopuin&lt;/a&gt;&lt;br&gt;
        &lt;span&gt;
          (2.5A)
        &lt;/span&gt;
      &lt;/p&gt;
    &lt;/li&gt;
    [ Other lodges are one of these two styles ]
  &lt;/ul&gt;
  </code></pre>
  
  <p>which is currently running. If I reintroduce the console error (rails client-side form validations missing file), it works. But there's got to be something else going on that I'm doing wrong here to cause this. Any thoughts?</p>