僅在單擊選項卡時從選項卡加載代碼

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

我不知道你的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 
} 

或者你可以簡單地寫在某種程度上Load功能只允許一個實例運行

（刪除'show.bs.modal'參考，這是觸發的事件bootstrap當你顯示標籤時，它與點擊無關http://getbootstrap.com/javascript/#tabs）

Answer 2

檢查這個fiddle，我希望它會結束這個問題:)。

修復localStorage問題：Fiddle2