来自div的jquery ui手风琴装有ajax

Question

我遇到通过ajax动态加载div的问题。

这是我的代码：

的 JS：

function CaricaListaParametriRicerca(CandidateFamiglie)
{
    var dati = {nome : "caricaListaParametriRicerca", famiglieCandidate : CandidateFamiglie, userId : $("#userID").val()};
    $.ajax({
       type: "GET",
       url: "Ricerca/elaboraRicerca.php",
       data: dati,
       error: function(data) {alert(data);},
       success: function(result) {
            $("#accordion").html("");
            $("#accordion").html(result);
            $("#accordion").accordion({
                collapsible: true
            });
        }
    });
}

$(document).ready(function(){
    $("#famiglieCandidate").selectmenu({
        change: function(){CaricaListaParametriRicerca($(this).val());}
    });
    CaricaListaParametriRicerca("Candidate");
});

我有这样的选择：

<label for="famiglieCandidate" id="famiglieCandidateLabel">Classe di ricerca: </label>
<select name="famiglieCandidate" id="famiglieCandidate">
    <option selected='selected'>Candidate</option>
    <option>Famiglie</option>
</select>

从js文件中可以看到，我在＆＃34; select＆＃34;上调用ajax请求。改变事件，并在其成功时重新加载#acordord div。

我的问题是：当我第一次加载页面时，一切都很棒。但是，如果我更改选择值，数据加载但手风琴失败（它看起来是标准样式，没有jquery ui样式）。

由于

编辑：完整的HTML代码

<input type="hidden" id="userID" value='<?php echo($menuLaterale_userID) ?>'>

<script type='text/javascript' src='Ricerca/ricercaScript.js'></script>
<link rel='stylesheet' type='text/css' href='Ricerca/styleRicerca.css'>
<link rel="stylesheet" href="jqueryUi/jquery-ui.css">
<script src="jqueryUi/jquery-ui.js"></script>

<form action="#">

    <label for="famiglieCandidate" id="famiglieCandidateLabel">Classe di ricerca: </label>
    <select name="famiglieCandidate" id="famiglieCandidate">
        <option selected='selected'>Candidate</option>
        <option>Famiglie</option>
    </select>

    </br></br>    

    <label for="accordion">Parametri ricerca:</label>
    <div name="accordion" id="accordion"></div>

</form>

Answer 1

你必须在再次初始化之前销毁手风琴实例。

所以你的功能如下：

function CaricaListaParametriRicerca(CandidateFamiglie)
{
    var dati = {nome : "caricaListaParametriRicerca", famiglieCandidate : CandidateFamiglie, userId : $("#userID").val()};
    $.ajax({
       type: "GET",
       url: "Ricerca/elaboraRicerca.php",
       data: dati,
       error: function(data) {alert(data);},
       success: function(result) {
            $("#accordion").html("");
            $("#accordion").html(result);
            if ( typeof $("#accordion").accordion('instance') != 'undefined') {
                $("#accordion").accordion('destroy');
            }   
            $("#accordion").accordion({
                collapsible: true
            });
        }
    });
}