Twitter引导程序“缀”未附加

Question

在实现搜索功能时，我将响应ajax请求返回动态生成的html，并将HTML插入div。 动态HTML的一部分是我想使用引导程序（“ #affixcontainer” div）粘贴的“导航窗格”。 但是，导航窗格拒绝粘贴。

<div class="hidden-xs col-xs-3">
    <div id="affixcontainer" data-spy="affix" data-offset-top="120" data-offset-bottom="10">
        <div class="panel panel-primary">
            <div class="panel-heading">SEARCH RESULTS</div>
            <div class="panel-body" style="padding:0;margin:0">
                <nav id="scroll-nav" class="bs-docs-sidebar hidden-print hidden-xs" role="navigation"> 
                    <ul class="nav nav-pills nav-stacked bs-docs-sidenav"> 
                        <li><a href="#top"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>Top</a></li>
                        <li>Category 1</li>
                        <li>Category 2</li>
                        <li>Category 3</li>
                        <li>Category 4</li>
                        <li>Category 5</li>
                    </ul>
                </nav>
            </div>  
        </div>
    </div>
</div>
<div class="col-xs-9">
    SEARCH LISTINGS
</div>

我也尝试使用javascript粘贴（另外，请参见下面的代码片段），但这似乎也不起作用。 该脚本在动态生成的HTM1的底部。 我究竟做错了什么？

$(document).ready(function(){
    $("#affixcontainer").affix({
        offset: {
            top: 120,
            bottom: 20
        }
    });
});

Answer 1

我假设上面的HTML是动态插入的HTML。 将.affix()函数附加到DOM后，需要对其进行调用。 data-属性仅适用于页面加载时可用的元素。 之后插入的任何内容都需要单独调用affix() 。 参见https://github.com/twbs/bootstrap/blob/v3.3.6/js/affix.js#L148实现。

编辑

另外， $(document).ready()无效，因为在此事件之后发生AJAX调用。 HTML元素将不在DOM中。