刷新頁面時JS代碼不運行

Question

在我的項目中，我有（可能很長）的出版物列表。通過jQuery我只顯示4個出版物和按鈕「顯示更多」來顯示其他人。但是當我刷新頁面時，我的js代碼沒有運行，用戶看到沒有任何按鈕的所有發佈。 所以，我的js代碼（這是從.slim文件）：

// 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> 

而這之前，他重新加載頁面什麼用戶看到：

這就是他認爲，如果他刷新頁面：

有什麼建議嗎？

Answer 1

所以，我的解決辦法是：

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(); 
     }); 
    });