jQuery 페이지를 한 번만 클릭하십시오.

Question

일부 탭이있는 페이지가 있고 특정 탭을 클릭하면 다른 페이지가 동적으로로드됩니다. 유일한 문제는 탭을 클릭 할 때마다 이러한 페이지가로드된다는 것입니다. 처음 클릭 할 때 한 번만로드하도록하려면 어떻게해야합니까?

$(document).ready(function(){ 
    $(".tab-content").hide(); 
    $("#one").show(); 

    $("a.tab-name").click(function(){ 
     $(".tab-name-active").removeClass("tab-name-active"); 
     $(this).addClass("tab-name-active"); 
     $(".tab-content").fadeOut(); 
     var content_show=$(this).attr("title"); 

     if (content_show === 'three') { 
      $("#"+content_show).load('new-page.php', function() { 
       $("#sorttable").tablesorter({ 
        headers: {0: {sorter: false}} 
       }); 
      }); 
     } 
     else if (content_show === 'four') { 
      $("#"+content_show).load('new-page-2.php'); 
     } 

     $("#"+content_show).delay(100).fadeIn('slow'); 

     return false; 
    }); 
}); 

감사 : 내가 사용하는

코드는 다음입니다!

Answer 1

은 .data()을 사용하여 부울 값을 저장합니다.

$(document).ready(function(){ 
    $(".tab-content").hide(); 
    $("#one").show(); 

    $("a.tab-name").data('loaded',false).click(function(){ 
     var $this = $(this); 
     $(".tab-name-active").removeClass("tab-name-active"); 
     $this.addClass("tab-name-active"); 
     $(".tab-content").fadeOut(); 
     var content_show= this.title; 

     if (! $this.data('loaded')) { 

      if (content_show === 'three') { 
      $("#"+content_show).load('new-page.php', function() { 
       $("#sorttable").tablesorter({ 
        headers: {0: {sorter: false}} 
       }); 
       $this.data('loaded',true); 
      }); 
      } 
      else if (content_show === 'four') { 
      $("#"+content_show).load('new-page-2.php', function(){ 
       $this.data('loaded',true); 
      }); 
      } 

     } 

     $("#"+content_show).delay(100).fadeIn('slow'); 

     return false; 
    }); 
}); 

Answer 2

방금 ​​어제와 같은 기능을했습니다. 내가 그것을 한 방법은 임의의 div에 "still_loading"클래스를 추가 한 다음 (컨테이너 div라고 말한 다음) 탭이 마지막으로로드 될 때 클래스를 다시 제거합니다.