0

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;
     });
      }
4

3 に答える 3

0

これが正しい方法かどうかはわかりませんが、いくつかの変更を行い、99% が機能するようになりました..

チャージがあります

$(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({  
            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 );
于 2013-02-11T03:54:15.730 に答える
0

数日前に同様の問題があり、 ajax ロードが完了するたびに実行されるajaxCompleteで解決することができました

次のようなことをしました:

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();
  });
})
于 2013-02-10T21:40:00.813 に答える
0

新しい ajax ページに古い通常の html ページをロードしようとしていると思います。新しいコンテンツをロードするとき、以前のようにスクリプトをロードするのではなく、スクリプトもロードする必要があります。ajax を介して適切なスクリプトを新しいタグに挿入するか、最初にすべてのコンテンツに適切なスクリプトをすべてロードするか、必要なときに require.js のようなライブラリでロードすることをお勧めします。 、それはすでに最適化されています。

于 2013-02-10T21:43:19.950 に答える