Aggiunta e aggiornamento dinamico degli elementi al widget Accordion nell'interfaccia utente jQuery

Question

Severalquestions qui su SO fare riferimento a questo open jQuery UI feature request per la possibilità di aggiungere/rimuovere dinamicamente pannelli dal widget Accordion. Il ticket stesso è contrassegnato (funzione chiusa: fissa) e da quello che posso dire dallo unit tests e un pull dal repository Git sembra essere implementato nell'ultima versione.

Tuttavia, se provo ad aggiungere un div come hanno fatto nel test di unità di cui sopra:

var element = $("#accordion"); 
$("#accordion").append("<h3>3</h3><div>3</div>"); 
$("#accordion").accordion("refresh"); 

non riesco a farlo funzionare.

Tuttavia this method opere:

$("#accordion").append("<h3>sec</h3<div>test</div>").accordion("destroy").accordion(); 

Ma io non voglio "distruggere" la fisarmonica, voglio solo aggiungere (o anteporre) un elemento e aggiornarla.

Guardando il div ho aggiunto in ispettore di Chrome dimostra che l'elemento ho aggiunto non ha lo stesso stile CSS aggiunto come il resto della fisarmonica:

Answer 1

comportamento realtà discusso è stato incluso nella jQuery UI 1.10.0 (solo released) e funziona bene per me.

Answer 2

unibasil è corretto che jQuery UI 1.10.0 ha aggiornato il metodo refresh per consentire ora questo comportamento.

Ecco la nota 1.10.0 changelog sull'aggiornamento.

Il metodo di aggiornamento ora riconoscerà i pannelli che sono stati aggiunti o rimosso. Questo porta la fisarmonica in linea con le schede e altri widget che analizzano la revisione per trovare le modifiche.

Setup

<div class="questions"> 
    <div> 
     <h3><a href="#">Question 1. My First Question ?</a></h3> 
     <div> 
      First content<br /> 
     </div> 
    </div> 
</div> 
<div> 
    <button id="addAccordion">Add Accordion</button> 
</div> 

Javascript

$('#addAccordion').click(function() { 
    var newDiv = "<div><h3>Q2 New Question</h3><div>New Content</div></div>"; 
    $('.questions').append(newDiv) 
    $('.questions').accordion("refresh");   
}); 

Esempio

jsFiddle che mostra che è possibile aggiungere nuove fisarmoniche al volo senza dover distruggere il vecchio.

Answer 3

Grazie a Jarek! Nel mio caso è funzionale senza allegare div. Il div causa la creazione della prossima fisarmonica.

$('#addAccordion').click(function() { 
    var newDiv = "<h3>Q2 New Question</h3><div>New Content</div>"; 
    $('.questions').append(newDiv) 
    $('.questions').accordion("refresh"); 
});