jQuery的功能停止與頁面加載與AJAX

Question

這是我第一次嘗試做一些加載頁面與AJAX的東西。

這是工作正常幾頁，但與幻燈片或另一個jquery函數，腳本停止工作，我看到一些關於我需要再次調用函數，但我不知道我的代碼是在哪裏正確的地方，就像我需要調用加載頁面。

有我的JavaScript代碼

$(document).ready(function(){ 
preload([ 
'/img/bg_body_topo.jpg', 
'/img/img_topo.png', 
'/img/logo_topo.png' 
]); 

$("a[rel*=outside]").attr("target", "_blank"); 
$('#scrollbar').tinyscrollbar({ sizethumb: 55 }); 
$('#menu-topo ul li ul').hide(); 
$('#menu-topo ul li').hover(function(e) { 
$(this).find('ul').stop().fadeToggle("fast"); 
}); 

$("#home-slide-destaques").scrollable({ circular: true }).autoscroll({ autoplay: true  }).navigator(".controles");   
    // DISCOGRAFIA 
    $("ul#int-abas-discografia").tabs("div#int-conteudo-discografia > div", { effect: 'fade' }); 
    // INTEGRANTES 
    $("ul#int-abas-integrantes").tabs("div#int-conteudo-integrantes > div", { effect: 'fade' }); 


var content = $('#content'); 
//pre carregando o gif 
    loading = new Image(); loading.src = '/img/103.gif'; 
    $('#menu-topo a, a#menu-ajax').live('click', function(e){ 
     e.preventDefault(); 

       var tHeight = $('#wrapper').height(); 
       var tWidth = $('#wrapper').width(); 
       var posicao = $('#wrapper').position(); 

       $('#carregando').remove(); 
       $('#imgcarregando').remove(); 

       $('#wrapper').prepend('<div id="carregando"></div> <div id="imgcarregando"> <img src="/img/103.gif" style="margin:280px 0 0 0;" alt="Carregando"/></div>'); 

       $('#carregando').css({ 
        'position': 'absolute', 
        'width': tWidth, 
        'height': tHeight, 
        'top': posicao.top, 
        'left': posicao.left, 
        'background': '#000', 
        'opacity': '.60', 
        'z-index': '9900', 
        'text-align': 'center' 
       }); 


       $('#imgcarregando').css({ 
        'position': 'absolute', 
        'width': tWidth, 
        'height': tHeight, 
        'top': posicao.top, 
        'left': posicao.left, 
        'background': '#000 url(/img/logo_topo.png) center 200px no-repeat', 
        'padding': '30px 0 0 0 ', 
        'opacity': '.88', 
        'z-index': '9999', 
        'text-align': 'center' 
       }); 


        content.html(''); 


     var href = $(this).attr('href'); 
     $.ajax({ 
      url: href, 
      success: function(response){ 
       //forçando o parser 
      var data = $('<div>'+response+'</div>').find('#content').html(); 

       //apenas atrasando a troca, para mostrarmos o loading 
       window.setTimeout(function(){ 
        content.fadeOut('slow', function(){ 

         $('#carregando').fadeOut('slow'); 
         $('#imgcarregando').fadeOut('slow'); 
         $('#content').height('auto'); 
          // DESTAQUES 

         content.html(data).fadeIn(); 

        }); 
       }, 1000); 
      } 
     }); 

    });       

}); 

    function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
    $('<img/>')[0].src = this; 
    // Alternatively you could use: 
    // (new Image()).src = this; 
    }); 
     } 

Answer 1

前幾天也有類似的問題，管理與ajaxComplete，被執行來解決這個問題，每次一個Ajax加載完成

做了類似的東西：

var rebindButtons = function(){ 
    $(elements).unbind('click').click(function(){ 
     // rebinding of button functionality 
    }); 
} 
$(document).ready(function(){ 
    // we bind the buttons for the first time 
    rebindButtons(); 
    // and when there's an ajax call completed we rebind the buttons 
    $(document).ajaxComplete(function() { 
    rebindButtons(); 
    }); 
}) 

Answer 2

我想你是試圖加載舊的通常的HTML頁面在你新的AJAX頁面。當你加載一個新的內容時，你不需要爲它加載腳本，因爲它之前就在運行，你也需要加載它們。 您可以嘗試自己做，通過ajax將適當的腳本插入到新標籤中，或者只需在開始時加載所有相關內容的所有相關腳本，或者我建議您在需要時使用require等庫來加載它們。 js，已經爲它進行了優化。

Answer 3

我不知道這是否是正確的做法，但我做了一些改變和99％的工程現在..

我有CHAGE

$(document).ready(function(){ 

// to 

$(function(){ 

也是我與JavaScript函數

使這

function boxWallpapers(){ 


$("#home-slide-destaques").scrollable({ circular: true }).autoscroll({ autoplay: true }).navigator(".controles");   

    // DISCOGRAFIA 
$("ul#int-abas-discografia").tabs("div#int-conteudo-discografia > div", { effect: 'fade' }); 

    // INTEGRANTES 
$("ul#int-abas-integrantes").tabs("div#int-conteudo-integrantes > div", { effect: 'fade' }); 

$('#menu-topo ul li ul').hide(); 
$('#menu-topo ul li').hover(function(e) { 
    $(this).find('ul').stop().fadeToggle("fast"); 
}); 

    } 

，然後在AJAX

 $.ajax({ 
      url: href, 
      success: function(response){ 
       //forçando o parser 

      var data = $('<div>'+response+'</div>').find('#content').html(); 

       //apenas atrasando a troca, para mostrarmos o loading 
       window.setTimeout(function(){ 
        content.fadeOut('slow', function(){ 

         $('#carregando').fadeOut('slow'); 
         $('#imgcarregando').fadeOut('slow'); 
         $('#content').height('auto'); 


         content.html(data).fadeIn(); 
         boxWallpapers(); // HERE HERE 



        }); 
       }, 1000);