动态创建的Bootstrap选项卡上的Jquery事件不起作用

Question

我在使用jquery和bootstrap的DOM流程时遇到了一些问题。

我需要在标签切换时附加一些事件来创建TABS（不是单个标签）。在此示例中，创建TABS只是在加载页面后“实时”附加代码。这很好用！ http://www.bootply.com/63026单击选项卡，将显示警报。

但是......如果我稍后创建TABS，例如通过按钮点击它来调用它：http://www.bootply.com/63033它不再起作用。这些选项卡是在单击时创建的，但是切换选项卡我不再在事件上附加弹出窗口。

你可以帮我解决一下吗？致谢!!!

Answer 1

你有一个听众：

$('.add-contact').click(function(e) {

添加标签。

您需要将此更新为

 $(document).on('click', '.add-contact', function(e) {

同时更改

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

到

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