Loading an external html-file which includes an external javascript-file to a div
<p>So I have a page which contains links to external project-pages. These project-pages get loaded into a div through a function:</p>

<pre><code>function clickEv(foo) {
    $('#loadContent').load('sub/'+foo+'.html').fadeIn('fast');
    window.location.hash = foo;
}
</code></pre>

<p>These project-pages all have the same template, text-div on the left and an image div on the right. What I want to do is include a slider for the image-div. This slider is an external javascript file:</p>

<pre><code>$(function() {
var sliderUL = $('.imageBrowser').children('ul'),
    imgs = sliderUL.find('img'),
    imgWidth = imgs[0].width, 
    imgsLen = imgs.length, 
    current = 1,
    totalImgsWidth = imgsLen * imgWidth;

$('#sButtons').find('div').on('click', function() {
    var direction = $(this).data('dir'),
        loc = imgWidth;

    // update current value
    ( direction === 'next' ) ? ++current : --current;

    // if first image
    if ( current === 0 ) {
        current = imgsLen;
        loc = totalImgsWidth - imgWidth;
        direction = 'next';
    } else if ( current - 1 === imgsLen ) {
        current = 1;
        loc = 0;
    }

    transition(sliderUL, loc, direction);
});
</code></pre>

<p>So first I find the images in the unordered list within div 'imageBrowser' and then determine where I'm going with the prev and next buttons within div 'sButtons'.
Again all the project-pages use the same template with the div's and lists.</p>

<p>I've tried including this slider.js file by attaching it with <code>&lt;script&gt;</code> tags in the beginning of the project-page files as well as by including <code>.getScript()</code> within the initial <code>clickEv(foo)</code> function. However, it doesn't seem to work with the first <code>.load()</code>, I believe this is because the div's imageBrowser and sButtons dont exist yet within the original html file? If I press the same project-page link again, loading the files for the second time, the slider works as intended. It is the same for every project-page, e.g. I open project-page1 - slider doesn't work, I open project-page2 - slider doesn't work, I open project-page1 again - slider works, I open project-page2 again - slider works. If I now switch back to page1, slider still works but if I open page3 it doesn't work again.</p>

<p>Am I trying something that's not feasible or what am I doing wrong?</p>

<p>// EDIT</p>

<p>I think I got it working now, the problem was that the script was getting executed before the content was loaded. Thus the variables which tried to get information off the elements only started working when they got loaded off the cache.</p>

<p>What I did was add <code>onload="$.getScript('src/slider.js')"</code> to the first <code>&lt;img&gt;</code> file within a project-page. Thus the script gets executed after the required elements have been loaded! Thanks to all off you and I will still consider that iframe due to performance.</p>
