События Jquery на вкладках Bootstrap, созданные динамически, не работают

Question

У меня возникла проблема с потоком DOM с jquery и bootstrap.

Мне нужно создать TABS (не одну вкладку) динамически с некоторыми событиями, подключенными при переключении вкладок. В этом примере TABS создается только «Live», добавляя код после загрузки страницы. Это прекрасно работает! http://www.bootply.com/63026 При нажатии на вкладке отображается предупреждение.

Но ... если я создаю ТАБС позже, например, называя его кнопкой, нажмите здесь: 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 
});