引导选项卡和委派示例

Question

我在左栏中有一个项目列表，当我单击其中一个项目时，将刷新右栏的内容。这很好用。

问题是，我在右边的内容中加载了引导选项卡。当它们在DOM加载后进入时，我不再有权访问“show”事件。当标签与dom的其余部分同时加载时，我的代码工作得很好，但是当加载之后，我猜事件是不可用的，因为这些事件是在加载完成后添加的。

我已经在这些论坛和其他网络上倾注了大量关于如何解决这个问题的想法，我相信你们中的一个摇滚明星已经遇到了这个问题，并提供了解决方案。

为了便于说明，下面是我正在尝试使用的一些示例代码：

<ul id="tabMenu" style="background: #D1D2D4;" class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#t-5">Content</a></li>
    <li><a data-toggle="tab" href="#t-9">Project</a></li>
    <li><a data-toggle="tab" href="#t-6">SEO</a></li>
    <li><a data-toggle="tab" href="#t-7">Image</a></li>
    <li><a data-toggle="tab" href="#t-10">Workflow</a></li>
</ul>


$('a[data-toggle="tab"]').on('show', function (e) {
     console.log(e.target); // activated tab
});

当我在标签页加载页面的时候运行它，它工作得很好。

也有人能告诉我: a.)如果我做错了什么，以及我能做些什么来修复它

b.)让我知道委托(或其他方法)是否可以解决这个问题，并提供一个我可以尝试的示例语法？

我非常感谢社区能提供的任何帮助。

Answer 1

试试看：

$(function(){
    $('a[data-toggle="tab"]').on('show', function (e) {
         console.log(e.target); // activated tab
    });
})

但如果你处理的是动态内容。试试看：

function bindtabs(){
    $('a[data-toggle="tab"]').on('show', function (e) {
         console.log(e.target); // activated tab
    });
}

在创建选项卡之后，您可以将其称为：

//creating tabs code here
bindtabs();

Answer 2

尝试使用on的延迟语法：

$(document).on('show', 'a[data-toggle="tab"]' function (e) {
     console.log(e.target); // activated tab
});

它应该在以后添加的元素上触发。