javascript - Twitter Bootstrap 导航栏选项卡 "hide"事件？

Question

我正在使用 twitter-bootstrap 导航栏结合选项卡通过 ajax 加载表单(我正在使用 Django 来提供表单)

<ul class="nav nav-pills" id="tabs">
    <li><a href="#form1" data-toggle="tab">Form1</a></li>
    <li><a href="#form2" data-toggle="tab">Form2</a></li>
    <li><a href="#form3" data-toggle="tab">Form3</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane" id="form1" data-src="{% url form1 %}"></div>
    <div class="tab-pane" id="form2" data-src="{% url form2 %}"></div>
    <div class="tab-pane" id="form3" data-src="{% url form3 %}"></div>
</div>

这与 jquery 结合:

$('#tabs').bind('show', function(element) {
  paneID = $(element.target).attr('href');
  src = $(paneID).attr('data-src');
  $(paneID).load(src);
});

首先，我的一部分想知道这是否是个坏主意。我想不出原因，但如果有人能向我指出这种方法是否有任何缺点，我将不胜感激。

其次，当我离开一个选项卡时，我想触发该选项卡内容的“onunload”事件。但是我似乎无法找到一种方法来在导航离开时从选项卡中“卸载”数据。

$('#tabs').bind('hide', function(element) {
  doStuff();
});

显然无效。任何帮助/指导表示赞赏。

Answer 1

Bootstrap 选项卡在显示选项卡时触发事件。

http://getbootstrap.com/2.3.2/javascript.html#tabs

取自 Bootstrap :

$('a[data-toggle="tab"]').on('shown', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

您可以使用 relatedTarget。那就是刚刚“卸载”的选项卡。