html - Javascript - on clearing cache before loading page, dynamically modified elements are not being created -

i have page carousel of magazines , on click of each magazine, page scrolls section below show magazine details. elements there created dynamically based on magazine clicked. same thing if there hash in url, check hash , if there one, scroll section magazine details, , create magazine details based on slug name of magazine in hash of url. magazine details section:

<section class="row expanded magazine-detail">     <div class="small-12 medium-6 large-7 columns magazine-hero">         <div class="hero-overlay-wrapper">             <img id="cover-image" src="/imagecache/cover/{{ $issues->first()->first()->image }}" alt="" />              <div class="magazine-preview-nav">               <div class="right-arrow" id="forward">                 <img src="{{ asset('/img/right-arrow-black.svg') }}" />                 <p>forrige forside</p>               </div>                <div class="left-arrow not-allowed" id="back">                 <img src="{{ asset('/img/left-arrow-black.svg') }}" />                 <p>neste forside</p>               </div>             </div>               <div class="magazine-overlay">               <a class="spid-login overlay-link">                 <a class="button primary expand spid-login">logg inn - les nettleser</a>               </a>             </div>         </div>     </div>      <div class="small-12 medium-6 large-5 columns magazine-info">       <div class="row">         <div class="small-12 columns magazine-title">             <h1 id="name">{{ $issues->first()->first()->magazine->name }}</h1>         </div>       </div>        <p id="summary">{{ $issues->first()->first()->magazine->summary }}</p>        @if($issues->first()->first()->magazine->image != '')         <img id="issueimage" src="/imagecache/medium/{{ $issues->first()->first()->magazine->image }}" alt="" />       @else         <img id="issueimage"/>       @endif        <div class="show-for-medium">         <a class="button primary expand meta3">kjøp abonnement - 1 måned gratis</a>         <button class="button secondary expand">bla igjennom arkivet</button>       </div>      </div> </section> 

so, on page load has details of first magazine in carousel data server. later data being modified after clicking or putting hash url. script modifies magazine-details section on click or if there hash in url.

var showmagazinedetail = function showmagazinedetail(id, slug, name, summary, issueimage, magazineimage, page){     images = [];     nextimage = 0;     imagesindex = 0;     loadedimages = [];     scrollpoint = document.height;      window.location.hash = slug;      $(".magazine-section").css('visibility', 'visible');      $('#name').text(name);     $('#summary').text(summary);     $('#cover-image').attr({"src" : '/imagecache/cover/' + issueimage, "alt" : name});      if (magazineimage != '') {       $('#issueimage').show();       $('#issueimage').attr({"src" : '/imagecache/medium/' + magazineimage, "alt" : name});     }else {       $('#issueimage').hide();       $('#issueimage').attr({"src" : '', "alt" : name});     }      // $('body').css('overflow-y', 'scroll');      $('html,body').animate({        scrolltop: $(".magazine-detail").offset().top - 80     });      $.getjson("issue/images",         { id: id },         function(result){           if (result.length < 2){               $('.magazine-preview-nav').hide();           } else {               $('.magazine-preview-nav').show();           }           $.each(result, function(i, value){               images.push(value);           });           preload();     }); };  $(function() {   $('.js-magazine-selector').click(function(){     var img = $(this),         id = img.data('id'),         slug = img.data('slug'),         name = img.data('name'),         summary = img.data('summary'),         magazineimage = img.data('magazine-image'),         issueimage = img.data('issue-image'),         page = img.data('page');      $('#back').addclass('not-allowed');     $('#forward').removeclass('not-allowed');      showmagazinedetail(id, slug, name, summary, magazineimage, issueimage, page);    }); });  $(document).ready(function () {   var slug = window.location.hash.substr(1);    if (slug != '') {     var selectedmagazine = $('[data-slug="' + slug + '"]'),         id = selectedmagazine.data('id'),         name = selectedmagazine.data('name'),         summary = selectedmagazine.data('summary'),         magazineimage = selectedmagazine.data('magazine-image'),         issueimage = selectedmagazine.data('issue-image'),         page = selectedmagazine.data('page');      showmagazinedetail(id, slug, name, summary, magazineimage, issueimage, page);   } }); 

everything works perfect on clicking each magazine in carousel, when have hash in url, if clear cache before loading page, magazine details not being created , tries scroll down, , goes top. if try again works fine. how can fix that?