Ajax fires only once,and the javascript file is loaded only once

Question

Basically, I am trying to load the html and JavaScript file for each subpage on my website with ajax. However, the JavaScript file only loads for the first subpage that is clicked on. If I click on the next subpage, only the html document for that loads, but the javascript does not. This is from looking at the firebug console: Clicking on about first, then clicking on contact:

GET http:..../about.html?t=0.19504348425731444
GET http:..../about.js?t=0.8286968088896364
GET http:..../contact.html?t=0.8467537141462976
(!!!NO GET FOR contact.js!!!)

Anyways, I tried using live() to bind the click event but it still doesn't work.Here's the relevant snippets of my code:

$('.subpage').live('click',function(){
$('#main').css({'cursor':'crosshair'});
    navsubpage = true;
    subpage = $(this).attr('id');
    $('.subpage').each(function(index) {
        $('#'+$(this).attr('id')).fadeOut('500');
        $('#'+$(this).attr('id')+'select').fadeOut('500');
        });
    $('#'+subpage+'h').css({'background-color':'#000','display':'block'});
    $('#'+subpage+'h').animate({'width':'375px','top':'120px','left':'100px','font-size':'400%'},'500');
    subtop = $('#'+subpage+'h').css('top');
    subleft = $('#'+subpage+'h').css('left');
    $('#pane').css({'border-left-width':'0px'});
    $('#nav').css({'background':'url("images/'+$(this).attr('id')+'.jpg") no-repeat 0px 0px'});
    $('#nav').animate({'left':'0px'},'4000','swing',function(){
    $('#reload').show().delay(500).queue(function(){
    alert("made it");
    $.ajax({
        url: subpage+".js?t=" + Math.random(),
        dataType: 'script',
        type: 'get',
    });
    });
    });
    reload(subpage);

});
$('#main').click(function(){
    if(navsubpage==true){
        $('#main').css({'cursor':'auto'});
        $('#reload').hide();
        $('#pane').css({'border-left-width':'10px'});
        $('#'+subpage+'h').animate({'width':'150px','top':subtop,'left':subleft,'font-size':'200%'},'2000',function(){
        $('#'+subpage+'h').css({'display':'none'})});
        $('#nav').animate({'left':'415px'},'3000','swing', function(){
        $('.subpage').each(function(index) {
        $('#'+$(this).attr('id')).fadeIn('3000');
        $('#'+$(this).attr('id')+'select').fadeIn('3000');
        });});
    navsubpage = false;
    }
});

the reload function loads the html and is working correctly.

I am really new to ajax, javascript...etc. If any of you can help me out, that'll be great.

Answer 1

It's confusing that you have both the "?t=" + Math.random() combined with cache: true .

The practice of appending a timestamp to a URL is a common method to prevent caching, but then you explicitly tell it that you want it to cache. You might try removing the cache: true option, as it looks to be totally superfluous and can only cause problems (the likes of which would resemble what you're describing here).

Answer 2

I would reccomend trying out a jQuery ajax shortcut function $.get()

It is farly simple and might cut out a lot of uneccesary options you are setting using the full $.ajax() function

Answer 3

Thanks for the help guys - in the end I just decided to not mess with the queue stuff. I still don't understand why it works, but I just took out the ajax and placed it outside of $('#reload').show().delay(500).queue(function(){, eliminating the delay and queue stuff and making the ajax a separate snippet of code. now it loads correctly.