来自加载了ajax的div的jquery ui手风琴

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文件中可以看到，我在“ select”更改事件上调用了ajax请求，成功后，我重新加载了#accordion 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
            });
        }
    });
}