jquery - Jquery Events on Bootstrap Tabs created dynamically doesn't work

Question

I'm having some issue with DOM flow with jquery and bootstrap.

I need to create TABS (not single tab) dinamically with some events attached on tabs switching. On this example the TABS is created just "Live" appending the code after loading page. This works fine! http://www.bootply.com/63026 On click on tab the Alert is shown.

But... if I create the TABS later, for example calling it by a button click like here: http://www.bootply.com/63033 it not works any more. The tabs are created on click but switching the tabs i have no more the popup attached on event.

Can you help me to fix it? THANKS!!!

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