탭을 클릭 할 때만 탭에서 코드로드

Question

일련의 탭이 있습니다. 페이지가로드되면 모든 탭이로드되는 것을 이해합니다. 그러나 나는 이것에 예외가되고 싶습니다 하나의 탭이 있습니다. 여기에는 특정 탭을 클릭 한 후에로드하고 싶은 위젯이 포함되어 있습니다.

<div class="tabbable tabbable-custom"> 
    <ul class="nav nav-tabs"> 
    <li class="active"> 
     <a id="nav-tabs-2" data-toggle="tab" href="#info">Details</a> 
    </li> 
    <li> 
     <a data-toggle="tab" href="#live">Live View</a> 
    </li> 
    <li> 
     <a data-toggle="tab" href="#local">Local Storage</a> 
    </li> 
    </ul> 
</div> 

와 다음이 내 탭

<div id="local" class="tab-pane"> 
    <div evercam="localstorage"></div> 

    <script type="text/javascript" src="https://s3.amazonaws.com/cdn.evercam.io/js/localstorage/0.0.1/hikvision.local.storage.mini.js"></script> 
    <script type="text/javascript"> 

    $('a[data-toggle="tab"]').on('click','show.bs.tab', function() { 
     if ($(this).attr('href') == '#local' && !LocalStorage.isLoaded()) { 
     // Set Evercam Camera ID 
     LocalStorage.options.cameraId = '<%= @camera['id'] %>'; 

     // OR // 
     // Using api_id and api_key 
     LocalStorage.options.api_id = '<%= current_user.api_id -%>'; 
     LocalStorage.options.api_key = '<%= current_user.api_key -%>'; 

     // Finally Load the widget 
     LocalStorage.Load(); 
     } 
    }) 


    </script> 
    </div><!--TAB PANE --> 

사용자가 탭을 클릭하면이 위젯을로드합니다. 내가 가진 문제는 사용자가 탭을 빠져 나온 다음 다시 돌아가는 경우입니다. 즉, 위젯을 다시로드하고 위젯의 두 인스턴스가 있습니다! 한 번만로드되도록 할 수있는 방법이 있습니까?

Answer 1

코드 구조가 얼마나 잘 모르겠지만, 그것은 당신이 수있는 경우처럼 보인다 다음

이

$('a[data-toggle="tab"]').on('click','show.bs.tab', function(e) { 
if ($(e.target).attr('href') == '#local' && !LocalStorage.isLoaded()) { 
// Set Evercam Camera ID 
LocalStorage.options.cameraId = '<%= @camera['id'] %>'; 

// OR // 
// Using api_id and api_key 
LocalStorage.options.api_id = '<%= current_user.api_id -%>'; 
LocalStorage.options.api_key = '<%= current_user.api_key -%>'; 

// Finally Load the widget 
LocalStorage.Load(); 
} 
}); 

은 그래서 오른쪽 탭을 클릭하면, 모두를 고려하는 경우거야 위젯은

이 좋아, 조금 거기 착각있어 UPDATE를로드됩니다.

$('a[data-toggle="tab"]').on('click', function(e) { 
    // Check if the clicked tab is the right one 
    // Also check if the widget is loaded 
    if ($(this).attr('href') == '#local' && !LocalStorage.isLoaded()) { 
    // Set Evercam Camera ID 
    LocalStorage.options.cameraId = '<%= @camera['id'] %>'; 

    // OR // 
    // Using api_id and api_key 
    LocalStorage.options.api_id = '<%= current_user.api_id -%>'; 
    LocalStorage.options.api_key = '<%= current_user.api_key -%>'; 

    // Finally Load the widget 
    LocalStorage.Load(); 
    } 
}); 

나는 그것이 thrid 파티 라이브러리입니다, 당신의 LocalStorage 객체가 어떻게 작동하는지 몰라? 너 자신인가? 전자의 경우 실행중인 인스턴스가 있는지 확인하는 방법이있을 것입니다. 후자의 경우, 당신은 단지

LocalStorage.prototype.isLoaded = function() { 
    //Here you write code to check if there is a running instance of the widget loaded 
    return this.widget !== undefined 
} 

을 할 수 또는 당신은 단순히 하나의 인스턴스 만

합니다 ('show.bs.modal' 참조를 제거

를 실행 할 수 있도록하는 방식으로 Load 기능을 작성할 수 있습니다.이 해고 이벤트입니다 당신이 탭을 보여줄 때 부트 스트랩은 클릭과 아무런 관련이 없다.

Answer 2

이것을 체크한다. 나는이 질문을 끝낼 것이기를 바란다. :)

는 로컬 스토리지의 문제를 해결 : Fiddle2