Javascripts not fully loading in jQuery ajax content
<p>I have a problem and it's giving me headaches since I started looking for it yesterday.
I have a couple of jQuery scripts and my page includes .load jQeury ajax. (at the bottom of the page)
I use a hover effect for the images and a fixed position of the header that is located in js/tools.js</p>

<p>The problem is that, randomly my browsers won't load the tools.js into the ajax. So sometimes you dont see the image hover effect in the loaded ajax content. When refreshing the page it woks fine.</p>

<p>My first bet was that the scripts I use collide or that there's a problem with the order in wich the content or the .js loads.</p>

<p>js:</p>

<pre><code>$(document).ready(function() {
    $('.cta-btn, .portf1, .portf2, .portf3, .portf4, .portf5, .btn-facebook, .btn-twitter, .btn-linkedin, .btn-studiofacebook, .btn-studiotwitter,.btn-studiolinkedin,.newsitem1, .newsitem2, .newsitem3').append('&lt;span class="hover"&gt;&lt;/span&gt;').each(function () {
        var $span = $('&gt; span.hover', this).css('opacity', 0);
        $(this).hover(function () {
            $span.stop().fadeTo(200, 1);
        }, function () {
    $span.stop().fadeTo(400, 0);
        });
    });
});
</code></pre>

<blockquote>
  <p>$(function(){
          var stickyHeaderTop = $('#stickyheader').offset().top;</p>

<pre><code>    $(window).scroll(function(){
            if( $(window).scrollTop() &gt; stickyHeaderTop ) {
                    $('#stickyheader').css({position: 'fixed', top: '0px'});
                    $('#stickyalias').css('display', 'block');
            } else {
                    $('#stickyheader').css({position: 'static', top: '0px'});
                    $('#stickyalias').css('display', 'none');
            }
    });   });
</code></pre>
</blockquote>

<p>html:</p>

<pre><code>&lt;!-- portfolio --&gt;
&lt;div id="portfoliowrapper"&gt;
&lt;div id="portfolioitems"&gt;&lt;/div&gt;
&lt;script&gt;$("#portfolioitems").load("werk.html #portfolio");&lt;/script&gt;
&lt;div class="clear"&gt;&lt;/div&gt;
&lt;a href="werk.html" class="cta-btn"&gt;&lt;h2 class="btn"&gt;Werk&lt;/h2&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>Any ideas? Thanks in advance!</p>
