title: jquery set div container height and width depending on image size
body: <p>I need to set a div height and width according to the first image size within a list of 40 items (all images are the same size). To make it short function works only the first time you load the page, after visiting other pages imgSize will be undefined.</p>
  
  <pre><code>&lt;div id="ulSorList"&gt; 
    &lt;div class="col-lg-4 col-md-6 col-sm-6 col-xs-6 mix"&gt;
      &lt;div class="portfolio-list"&gt;
        &lt;a href="#"&gt;    
            &lt;div class="overlay-block"&gt;&lt;/div&gt;
            &lt;img src="/img/1.jpg" class="img-responsive"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-lg-4 col-md-6 col-sm-6 col-xs-6 mix"&gt;
      &lt;div class="portfolio-list"&gt;
        &lt;a href="#"&gt;    
            &lt;div class="overlay-block"&gt;&lt;/div&gt;
            &lt;img src="/img/2.jpg" class="img-responsive"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    ...
    ...
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>$("#ulSorList img:first").load(function() {
    imgSize = $(this);
    $(".portfolio-list a .overlay-block").width( imgSize.width()).height( imgSize.height() );
    alert(imgSize.width());
  });
  </code></pre>
  
  <p>Everything works until you navigate throught the site (new page is loaded).</p>
  
  <p>IT seems like the script is breaking at some point, so I guess that I only need to get the img size of the first list item. </p>
  
  <p>I edited because since i didnt know what could be the problem the question was bad formulated.</p>
  
  <p>Nothing I cant make it work, now it seems like the script isnt breaking and at least I am getting imgSize width, but I am still at the same position. Script wont function after navigaion.</p>
  
  <p>Any ideas? </p>