0

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

问题是，我在右侧的内容中加载了引导选项卡。当它们在 DOM 加载后进来时，我不再有权访问“显示”事件。My code works great when the tabs are loaded at the same time as the rest of the dom, but when loaded after, I am guessing the events aren't available since these were added after it was done loading.

我一直在浏览这些论坛和网络的其余部分，想知道如何解决这个问题，我相信你们中的一个摇滚明星已经遇到过这个问题并提供了解决方案。

为了说明起见，这里是一些我试图开始工作的示例代码：

<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.）让我知道委托（或其他方法）是否可以解决此问题，并提供我可以尝试的示例语法？

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

4

2 回答 2

0

试试看：

$(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();
于 2013-09-13T13:54:49.800 回答
0

尝试使用延迟语法on代替：

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

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

于 2013-09-13T14:27:26.143 回答