JS-Code wird nicht ausgeführt, wenn die Seite aktualisieren

Question

In meinem Projekt habe ich (möglicherweise lange) Liste von Publikationen. Über jQuery zeige ich nur 4 Publikationen und Button "Zeige mehr" um anderen zu zeigen. Aber wenn ich die Seite aktualisiere, läuft mein js-Code nicht und der Benutzer sieht alle Publikationen ohne irgendeine Taste. Also, (ist dies aus .slim Datei) mein js Code:

// in my .slim file 
ruby: 
    show_more_text = I18n.t('projects.show_more') 
    show_less_text = I18n.t('projects.show_less') 

javascript: 
    $(document).ready($('.aw-block-list').each(function() { 
    var LiN = $(this).find('.aw-item').length; 
    if (LiN > 4) { 
     $('.aw-item', this).eq(3).nextAll().hide().addClass('toggleable'); 
     $(this).append('<div class="aw-item"><div class="item-sub more" id="more"><span class="show-icon chevron-with-circle-down"></span> #{show_more_text}</div></div>'); 
    } 
    })); 

    $('#more').on('click', function() { 
    if ($(this).hasClass('less')) { 
     $(this).text('').append('<span class="show-icon chevron-with-circle-down"></span> #{show_more_text}').removeClass('less'); 
    } else { 
     $(this).text('').append('<span class="show-icon chevron-with-circle-up"></span> #{show_less_text}').addClass('less'); 
    } 

    $(this).parent().siblings('.aw-item.toggleable').slideToggle(); 
    }); 


// the publications list html (same file, but compiled) 
<div class="aw-block-list"> 
    <div class="aw-item"> 
     <a class="item-name" href="https://hqroom.ru/elytnyi-dom-v-rostovskoi-oblasty.html">Elite house in the Rostov region</a> 
     <div class="item-sub">Portal Hqroom</div> 
    </div> 
    <div class="aw-item"> 
     <a class="item-name" href="http://www.homedsgn.com/2016/09/09/architectural-studio-chado-designs-a-private-residence-in-the-rostov-region-of-russia/?awt_l=Ex6Yk&amp;awt_m=3YTH2VoXGZVIt8j">Designs a Private Residence in the Rostov Region</a> 
     <div class="item-sub">Portal Homedsn</div> 
    </div> 
    <div class="aw-item"> 
     <a class="item-name" href="http://www.marchicucine.it/en/eugene-zadorozhnii-e-oleg-pigulevskaya-scelgono-la-cucina-marchi/">The Marchi Kitchen In project dedicated to house design of Chado studio</a> 
     <div class="item-sub">Kitchens Marchi Cucine</div> 
    </div> 
    <div class="aw-item"> 
     <a class="item-name" href="http://www.flexform.it/en/projects/residential/rostov-russia">The section sofa in private house</a> 
     <div class="item-sub">Furniture Flexform</div> 
    </div> 
    <div class="aw-item"> 
     <a class="item-name" href="http://www.brandvanegmond.com/en/projects/details/112/modern-country-house-russia">The modern country house. Russia</a> 
     <div class="item-sub">Luminaires BRAND VAN EGMOND</div> 
    </div> 
    <div class="aw-item"> 
     <a class="item-name no-link" href="">Monumental elegance</a> 
     <div class="item-sub">Home &amp; Family magazine, Rostov-on-Don</div> 
    </div> 
    <div class="aw-item"> 
     <a class="item-name no-link" href="">Elite house in Rostov-on-Don, Russia</a> 
     <div class="item-sub">Flexform. A book with the best projects, Italia</div> 
    </div> 
</div> 

Und das ist, was Benutzer sieht, bevor er die Seite neu zu laden:

Und das ist er sieht, wenn er die Seite aktualisiert:

Irgendwelche Vorschläge?

Answer 1

Also, meine Lösung ist:

javascript: 
    $(document).ready(function() { 
     $('.aw-block-list').each(function() { 
     var itemCount = $(this).find('.aw-item').length; 
     if (itemCount > 4) { 
      $('.aw-item', this).eq(3).nextAll().hide().addClass('toggleable'); 
      $(this).append('<div class="aw-item"><div class="item-sub more" id="more"><span class="show-icon chevron-with-circle-down"></span> #{show_more_text}</div></div>'); 
     } 
     }); 
     $('#more').on('click', function() { 
      if ($(this).hasClass('less')) { 
       $(this).text('').append('<span class="show-icon chevron-with-circle-down"></span> #{show_more_text}').removeClass('less'); 
      } else { 
       $(this).text('').append('<span class="show-icon chevron-with-circle-up"></span> #{show_less_text}').addClass('less'); 
      } 

      $(this).parent().siblings('.aw-item.toggleable').slideToggle(); 
     }); 
    });