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

当我在页面加载选项卡时运行此选项时，它运行良好。但是，当我运行它并且之后加载它们（就像我提到的.load事件一样）时，show事件似乎不会触发。

有人可以告诉我： 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
});

它应该触发稍后添加的元素。

引导选项卡和委派示例

2 个答案: