JQueryUI llamando a .accordion dos veces en una sola ID

Question

Estoy tratando de usar AJAX para generar dinámicamente un acordeón Jquerui según lo que se selecciona en una caja. Actualmente tengo

<div style="display:none" id="testselect"> 
</div> 

Con JS

$("#courseselect").change(function() { 
       $("#testselect").html(""); // Empty any previous data 
       $("#testselect").css("display", "block"); // Display it if it was hidden 
       $.getJSON('json.php?show=tests&courseid=' + $(this).val(), function(data) { 
       for(x in data) 
       { 
        $("#testselect").append("<h3 value=\"" + data[x].uno + "\"><a href=\"#\">" + data[x].name + "</a></h3>"); 
        $("#testselect").append("<div>Foo</div>"); 
       } 
       $("#testselect").accordion({ change:function(event, ui) { courseid = ui.newHeader.attr("value"); 
       } }); 
      }); 
     }); 

Ahora bien, esto funciona la primera vez que cambio mi selección, pero después de que vuelve al viejo y simple HTML sin formato. Como si la llamada a .accordion() nunca hubiera terminado. Supongo que esto tiene algo que ver con que JQuery no quiere que formatee algo dos veces, pero realmente no tengo ni idea.

Answer 1

tratar de destruir el acordeón antes de vaciar el div y empezar de nuevo:

$("#courseselect").change(function() { 
    $("#testselect") 
     .accordion("destroy") 
     .empty() // equivalent to .html(""); 
    $.getJSON(... 

Más información here.

¡Buena suerte!