2016-04-08 35 views
0

eki değil Bir arama işlevselliğini uygularken, bir ajax isteğine yanıt olarak ve HTML'yi bir div'e ekleyerek dinamik olarak oluşturulmuş html döndürüyorum. Dinamik HTML'nin bir kısmı, bootstrap'i ("#affixcontainer" div) kullanarak eklemek istediğim bir "gezinme bölmesi" dir. Bununla birlikte, gezinti bölmesi yapışmayı reddeder. Twitter-bootstrap "eki"

<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> 

Ben de (ayrı kod aşağıda kestirmene bakınız) javascript kullanarak yapıştırın çalıştı, ancak bu da işe görünmüyor. Komut, dinamik olarak oluşturulmuş HTMl'nin altında. Neyi yanlış yapıyorum?

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

cevap

1

Yukarıdaki HTML'nin dinamik olarak eklenen HTML olduğunu varsayalım. .affix() işlevinin, DOM'a eklendikten sonra çağrılması gerekir. data- öznitelikleri yalnızca sayfa yüklemesinde kullanılabilen öğeler için çalışır. Bundan sonra eklenen herhangi bir şey affix()'a ayrı bir çağrı gerektirir. Uygulaması için bkz. https://github.com/twbs/bootstrap/blob/v3.3.6/js/affix.js#L148.

DÜZENLEME AJAX çağrıları beri

Ayrıca $(document).ready() çalışmıyor bu olaydan sonra ortaya çıkar. HTML öğeleri henüz DOM'ta bulunmuyordu.

+0

Ahhhh. Tamam. Buna dayanarak .affix işlevini başarıdan aradım: JQUERY .ajax çağrısı için işlev (sonuç) ve işe yaradı. Teşekkürler! – SWS3D