在引导程序中显示动态创建的选项卡内容答案

【问题标题】：Show dynamically created tab content in bootstrap在引导程序中显示动态创建的选项卡内容
【发布时间】：2014-11-07 10:35:35
【问题描述】：

所以我使用这个example 在bootstrap 中动态创建选项卡，一切正常，但是点击了新创建的tab，但内容从未显示。我尝试了 javascript 中存在的所有方法来显示它，但什么也没有。 tab-pane 永远不会切换到 active。有人知道吗？

Ps：我将它包含在richfaces 页面中。

我的代码：

$(document).on('click','#add.add-contact',function (e) {
                e.preventDefault();
                var id = $(".nav-pills").children().length; //think about it ;)
                var tabId = 'contact_0' + id;
                $(this).closest('li').before('<li><a href="#' + tabId + '" data-toggle="pill">New Tab</a></li>');
                $('.tab-content').append('<div class="tab-pane fade" id="' + tabId + '">Contact Form: New Contact ' + id + '</div>');
                $('.nav-pills li:nth-child(' + id + ') a').click();


            }); 

$(document).on('click', '#reportsDisplay.nav-pills a', function (e) {

            e.preventDefault();
            if (!$(this).hasClass('add-contact')) {
                $(this).tab('show');

            }

        })

<a4j:outputPanel styleClass="tabtable">
    <ul class="nav nav-pills" id="reportsDisplay">
        <li class="active"><a href="#contact_01" data-toggle="pill">Joe
                Smith</a></li>
        <li><a href="#contact_02" data-toggle="pill">Molly Lewis</a>
            </li>
        <li><a href="#" class="add-contact" id="add">+ Add
                Contact</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade active" id="contact_01">Contact Form:
            Joe Smith</div>
        <div class="tab-pane fade" id="contact_02">Contact Form: Molly
            Lewis</div>
        </div>
</a4j:outputPanel>

更新：

我一直在调试 javascript 代码，似乎 $(this).tab('show'); 返回 Undefined。我不知道如何解决这个问题。

更新： 我写了这个函数来手动完成

$(function(){

             $(document).on('click',"#contacts.nav-pills a", function (e) {
                e.preventDefault();
                var active_tab_selector = $('.tab-content > div.active');
                var target_tab_selector = '#'+$(this).attr('href').substr(1);
                $(active_tab_selector).removeClass('active in');
                $(target_tab_selector).addClass('active in');
            }); 
        });

但我得到Empty string passed to getElementById(). 的行$(target_tab_selector).addClass('active in');。如何解决？

【问题讨论】：

它对我有用。
是的，它应该工作，但它不适合我。
您使用的是哪种浏览器？
在 Firefox 中也能正常工作。你的控制台有什么错误吗？
不，这不是很奇怪的部分，我会用我的代码更新。

标签： twitter-bootstrap dynamic tabs

【解决方案1】：

我发现了需要添加此行的错误：if (!$(this).hasClass('add-contact')) 在函数的开头，因为当我单击 add 并变为空时，target_tab_selector 的值会发生变化。

【讨论】：