javascript - Twitter-bootstrap "affix"未粘贴

Question

在实现搜索功能时，我返回动态生成的 html 以响应 ajax 请求并将 HTML 插入到 div 中。动态 HTML 的一部分是一个“导航 Pane ”，我想使用 bootstrap(“#affixcontainer”div)附加它。然而，导航 Pane 拒绝粘住。

<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 进行粘贴(单独参见下面的代码片段)，但这似乎也不起作用。该脚本位于动态生成的 HTMl 的底部。我究竟做错了什么？

$(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 中。