JQueryUI, вызывающий .accordion дважды на одном id

Question

Я пытаюсь использовать AJAX для динамического создания аккордеона JquerUI на основе того, что выбрано в поле. В настоящее время я

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

С 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"); 
       } }); 
      }); 
     }); 

Теперь это работает первый раз, когда я изменить свой выбор, но после этого он возвращается в обычный старый неформатированный HTML. Как будто вызов .accordion() никогда не был выполнен. Я предполагаю, что это связано с тем, что JQuery не хочет, чтобы я форматировал что-то дважды, но я действительно понятия не имею.

Answer 1

Попытка уничтожить аккордеоне, прежде чем очистить DIV и начать заново:

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

Подробнее here.

Удачи вам!