Javascript 仅当单击选项卡时才从选项卡加载代码

我有一系列的标签。我知道一旦页面加载，所有选项卡都会加载。我有一个标签，但我想成为一个例外。它包含一个我正在加载的小部件，我只想在用户单击该特定选项卡后加载它

 <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 -->

$（'a[data toggle=“tab”]”）。在（'click'，'show.bs.tab'，function（）上{
if（$（this.attr（'href'）='#local'&&&！LocalStorage.isLoaded（））{
//设置Evercam摄像机ID
LocalStorage.options.cameraId=''；
//或//
//使用api_id和api_密钥
LocalStorage.options.api_id=''；
LocalStorage.options.api_key=''；
//最后加载小部件
LocalStorage.Load（）；
}
})

---

这将在用户单击选项卡时加载小部件。我遇到的问题是，如果用户离开选项卡，然后返回到它-它重新加载小部件，我有两个小部件实例！有没有办法让它只加载一次？

我不知道您的代码结构如何，但在这种情况下，您可以执行以下操作：

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

或者您可以简单地编写

Load

函数，只允许运行一个实例

（删除

'show.bs.modal'

引用。这是引导程序在显示选项卡时触发的事件，与单击无关）

检查此项，我希望它将结束此问题：）

---

修复本地存储问题：

您的绑定事件错误<代码>$（选择器）.on（'click'，'show.bs.tab'，function（）{//let do awesomething here}）你好，谢谢Jh Kaiz，我已经更新了上面的代码。我尝试过在

if（$（e.target）.attr（'href'）=='#local'）{/}

之间使用和不使用此位，但两者都不起作用。你能看到我的错误吗？你能提供你的HTML代码吗？只是

而已，我需要为你提供JS解决方案，伙计：）。在这种情况下，我想你所期望的是

if（$（this）.attr（'href'）=='#local'）{//做你想做的事；}

将e放入

function（）

dude，如果不是

e未定义

将抛出错误：D.需要更多修改，我认为我们应该使用

$（this）.attr（'href'）

而不是

$（e.target）.attr（'href'）

）。如果内部

.show.bs.tab

有一个span或其他东西，那么它就错了，在这种情况下，

$（e.target）==$（'.show.bs.tab span'）

（在这种情况下，我们不再需要

函数（e）

，对不起）。

这个
在这种情况下是
.show.bs.tab
-你触发事件的点击，但是
e.target
返回您单击它的
。如果我创建一个带有图标的动态选项卡，看起来像
，
e.target
可能会返回
或
检查这个小提琴，你们会得到我想告诉你们的：@Alexandrewiechersvazu更新了答案，@Ciarán。试图给你一个如何实现你想要的想法。最好了解一下本地存储对象的结构DHI Jh Kaiz，感谢您创建这个。这会在单击选项卡时加载代码，但我仍然有一个问题，即如果我导航到另一个选项卡并返回，它会导致javascript再次加载，因此我最终会加载两个小部件实例检查我的更新是否符合您的想法@Ciarán。localStorage有3个函数：
setItem（）、removItem（）、getItem（）
$('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.prototype.isLoaded = function() {
  //Here you write code to check if there is a running instance of the widget loaded
  return this.widget !== undefined
}