Twitter-bootstrap "affix" не прилагается

Question

При реализации функции поиска я возвращаю динамически сгенерированный html в ответ на запрос ajax и вставляя HTML в div. Часть динамического HTML - это «навигационная панель», которую я хочу использовать с помощью bootstrap (div «#affixcontainer»). Однако навигационная панель отказывается придерживаться.

<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 для его реализации.

EDIT

Кроме того, $(document).ready() не работает, так как AJAX вызовов происходит после этого события. Элементы HTML еще не были бы в DOM.