Come fare Twitter Bootstrap lavoro Collapse su html caricate dinamicamente utilizzando Ajax

Question

Sto caricando html utilizzando ajax chiamata, questa html ha Bootstrap Collapse. Il problema è Il collasso non funziona, se si fa clic si espande ma non si comprime nuovamente.

Per verificare se sto facendo qualcosa di sbagliato, ho messo lo stesso codice su una pagina statica (non caricato utilizzando Ajax) e funziona bene. Quindi sembra problematico solo con l'html caricato dinamicamente.

Ho provato manualmente consentendo Chiudi usando

$(".collapse").collapse() 

ma ancora lo stesso problema.

Credo che ho bisogno di usare live()/on() metodi di jQuery, perché il codice HTML è dinamico, ma non sapete come posso fare per chiamare $(".collapse").collapse() perché penso che funziona solo su eventi o è qualcos'altro che devo fare?

Answer 1

vorrei suggerire di chiamare

$(".collapse").collapse() 

all'interno la funzione del successo del ajax dopo l'html dinamica viene aggiunto.

Answer 2

Il mio risolvere è:

$('.collapse').on('show', function() { 
    var $this = $(this); 
    if($this.attr('data-href')) 
    { 
     $this.html($.getJSON($this.attr('data-href'),function(data){ 
      $this.html(data.html); 
      $this.removeAttr('style'); 
     })); 
    } 
    }) 

Answer 3

Basta eseguire questo su evento di successo ajax.

$('[data-toggle="collapse"]').click(function(e){ 
     e.preventDefault(); 
     var target_element= $(this).attr("href"); 
     $(target_element).collapse('toggle'); 
     return false; 
});