仅在单击选项卡时从选项卡加载代码

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