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

我认为您正在尝试在新的ajax页面中加载旧的常用html页面。当您加载新内容时，您不会像以前那样加载脚本，您也需要加载它们。您可以尝试自己完成，通过ajax将适当的脚本插入新标签中，或者只是在beggining中为所有内容加载所有适当的脚本，或者我建议您在需要时使用像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 );

jQuery函数停止使用ajax在页面加载上工作

3 个答案: