3 
$(document).ready(function(){

$(function() {
    $('a.ajaxload').click(function(e) {           
      var url = $(this).attr('href');
      $('#desktopcontainer').load(url); // load the html response into a DOM element
      e.preventDefault(); // stop the browser from following the link
    });
});

$(function() {
    $(".accordion .accordion-tabs .tab").each(function(){
        $(this).click(function(){
            if ($(this).hasClass('tab')){
            $(this).removeClass('tab');
            $(this).addClass('active');
          }else{
            $(this).removeClass('active');
                    $(this).addClass('tab');
          }

          $(this).next().slideToggle('slow');
                return false;
        });
    });
});
});

タブは正常に動作しますが、「a.ajaxload」をクリックしてコンテンツをページに追加すると、タブが応答しなくなります。

誰が問題がどこにあるのか教えてもらえますか?

解決しました!!!

私がしたことは、ロード後に関数を追加することでした...以下の新しいコードを見て、違いを確認してください。誰かの役に立てば幸いです。

$(document).ready(function(){

initDashboard();

$(function() {
    $('a.ajaxload').click(function(e) {           
      var url = $(this).attr('href');
      $('#desktopcontainer').load(url); // load the html response into a DOM element
      e.preventDefault(); // stop the browser from following the link
      initDashboard();
    });
});

function initDashboard() {
    $(".accordion .accordion-tabs .tab").each(function(){
        $(this).click(function(){
            if ($(this).hasClass('tab')){
            $(this).removeClass('tab');
            $(this).addClass('active');
          }else{
            $(this).removeClass('active');
                    $(this).addClass('tab');
          }

          $(this).next().slideToggle('slow');
                return false;
        });
    });
}

});
4

1 に答える 1

2

on()動的に追加されるため必要です（たとえば、loadメソッドを介して挿入されます）：

$('.accordion .accordion-tabs').on('click', '.tab', function(){
   if ($(this).hasClass('tab')) {
        $(this).removeClass('tab');
        $(this).addClass('active');
   }else{
        $(this).removeClass('active');
        $(this).addClass('tab');
   }

   $(this).next().slideToggle('slow');
        return false;    
   });
});

また、jQuery 対応ハンドラーを3 回使用する必要はありません。jQuery 関連のすべてのコードをこの中に入れるだけです。

$(document).ready(function(){

});

ドキュメント:

于 2012-06-28T11:34:57.120 に答える