Ajax запускается только один раз, а файл javascript загружается только один раз

Question

В основном я пытаюсь загрузить html и файл JavaScript для каждой подстраницы на моем веб-сайте с помощью ajax. Однако файл JavaScript загружается только для первой вложенной страницы, по которой щелкают. Если я нажимаю на следующую подстраницу, загружается только HTML-документ для этого, а javascript - нет. Это от взгляда на консоль firebug: сначала нажмите примерно на, а затем нажмите на контакт:

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!!!)

В любом случае, я пытался использовать live () для привязки события click, но он все еще не работает. Вот соответствующие фрагменты моего кода:

$('.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;
    }
});

функция перезагрузки загружает HTML и работает правильно.

Я действительно новичок в ajax, javascript ... и т. Д. Если кто-нибудь из вас сможет мне помочь, это будет здорово.

Answer 1

Я бы порекомендовал попробовать функцию ярлыка jQuery ajax $. Get ()

Это очень просто и может обрезать множество ненужных опций, которые вы устанавливаете, используя полный $Функция .ajax ()

Answer 2

Спасибо за помощь, ребята - в конце концов я просто решил не связываться с вещами в очереди. Я до сих пор не понимаю, почему это работает, но я просто вынул ajax и поместил его вне $ ('# reload'). Show (). Delay (500) .queue (function () {, устраняя задержку и очереди и создание отдельного фрагмента кода для ajax. Теперь он загружается правильно.

Answer 3

Это сбивает с толку, что у вас есть оба "?t=" + Math.random() в сочетании с cache: true.

Практика добавления метки времени к URL-адресу является распространенным методом для предотвращения кэширования, но затем вы явно указываете, что хотите, чтобы он кэшировался. Вы можете попробовать удалить опцию cache: true, так как она выглядит излишней и может вызывать только проблемы (подобные тому, что вы описываете здесь).