Javascript 为什么jQueryUI手风琴不适用于ajax调用后绘制的div？_Javascript_Jquery_Ajax_Jquery Ui_Accordion

Javascript 为什么jQueryUI手风琴不适用于ajax调用后绘制的div？

javascript jquery ajax jquery-ui

Javascript 为什么jQueryUI手风琴不适用于ajax调用后绘制的div？,javascript,jquery,ajax,jquery-ui,accordion,Javascript,Jquery,Ajax,Jquery Ui,Accordion,我有一个简单的工作，在页面加载后填充。以下代码可以正常工作： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script&g

我有一个简单的工作，在页面加载后填充。以下代码可以正常工作：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $(function(){
        $("#ticket-event-list").accordion({
            header: '.event',
            collapsible: true,
            active: false,
            animate: {duration: 150}
        });
    });

    document.tickets = {
        "event1": {"title": "First Event", "content": "The first content"},
        "event2": {"title": "Second Event", "content": "The second content"}
    }

    $.each(document.tickets, function(eventId, eventObj){
        var eventHtml = '<div class="event" id="'+eventId+'">'+eventObj.title+'</div><div class="content">'+eventObj.content+'</div>';
        $("#ticket-event-list").append(eventHtml);
    });
});
</script>

</head>
<body>
    <div id="ticket-event-list"></div>
</body>
</html>


$（文档）.ready（函数（）{
$（函数（）{
$（“#票务活动列表”）.手风琴({
标题：'.event'，
可折叠的：是的，
活动：错误，
动画：{持续时间：150}
});
});
document.tickets={
“事件1”：{“标题”：“第一个事件”，“内容”：“第一个内容”}，
“事件2”：{“标题”：“第二个事件”，“内容”：“第二个内容”}
}
$.each（document.tickets，函数（eventId，eventObj）{
var eventHtml=''+eventObj.title+''+eventObj.content+''；
$（“#票务事件列表”）.append（eventHtml）；
});
});

加载页面时插入的html如下所示：

<div id="ticket-event-list" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
    <div class="event ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" id="event1" role="tab" aria-controls="ui-id-1" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>First Event</div>
    <div class="content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-1" aria-labelledby="event1" role="tabpanel" aria-hidden="true" style="display: none; height: 18px;">The first content</div>
    <div class="event ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons" id="event2" role="tab" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Second Event</div>
    <div class="content ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-id-2" aria-labelledby="event2" role="tabpanel" aria-hidden="true" style="display: none; height: 18px;">The second content</div>
</div>


第一件事
第一项内容
第二件事
第二项内容

不过，我用来填充accordion的json应该首先从api中获取。所以我重写了js，如下所示。请注意，我甚至不使用API调用的结果。我仍然使用我在js中编写的json：

$(document).ready(function(){
    $(function(){
        $("#ticket-event-list").accordion({
            header: '.event',
            collapsible: true,
            active: false,
            animate: {duration: 150}
        });
    });

    document.tickets = {
        "event1": {"title": "First Event", "content": "The first content"},
        "event2": {"title": "Second Event", "content": "The second content"}
    }

    function requestTicketsByEvent(){
        var requestUrl = "{{ url_for('ajax_ticketsByEvent') }}";
        var request = $.ajax({
            dataType: "json",
            url: requestUrl,
            type: "GET"
        });
        return request;
    }

    function ticketsByEventCallback(request){
        request.done(function(data){
            // Note I don't even use the data returned by the call
            $.each(document.tickets, function(eventId, eventObj){
                var eventHtml = '<div class="event" id="'+eventId+'">'+eventObj.title+'</div><div class="content">'+eventObj.content+'</div>';
                $("#ticket-event-list").append(eventHtml);
            });
        });
    }

    var request = requestTicketsByEvent();
    ticketsByEventCallback(request);
});

$（文档）.ready（函数（）{
$（函数（）{
$（“#票务活动列表”）.手风琴({
标题：'.event'，
可折叠的：是的，
活动：错误，
动画：{持续时间：150}
});
});
document.tickets={
“事件1”：{“标题”：“第一个事件”，“内容”：“第一个内容”}，
“事件2”：{“标题”：“第二个事件”，“内容”：“第二个内容”}
}
函数requestTicketsByEvent（）{
var requestUrl=“{url\u for（'ajax\u ticketsByEvent'）}”；
var请求=$.ajax({
数据类型：“json”，
url:requestUrl，
键入：“获取”
});
返回请求；
}
函数ticketsByEventCallback（请求）{
请求完成（功能（数据）{
//注意，我甚至不使用调用返回的数据
$.each（document.tickets，函数（eventId，eventObj）{
var eventHtml=''+eventObj.title+''+eventObj.content+''；
$（“#票务事件列表”）.append（eventHtml）；
});
});
}
var request=requestTicketsByEvent（）；
ticketsByEventCallback（请求）；
});

但生成的html仅如下所示：

<div id="ticket-event-list" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
    <div class="event" id="event1">First Event</div><div class="content">The first content</div>
    <div class="event" id="event2">Second Event</div><div class="content">The second content</div>
</div>


第一个事件第一个内容
第二个事件第二个内容

在将html绘制到DOM之后，我还尝试使用

.accordion（）

方法，但这也没有帮助。此外，在第一段代码（工作正常）中，在html被绘制到DOM之前，还使用了

.accordio（）

方法

有人知道为什么API调用会阻止手风琴工作吗？欢迎所有提示

手风琴无法处理动态添加的内容。尝试将您的附件包装在一个

destroy

中并重新初始化调用：

var accordionOptions = {
        header: '.event',
        collapsible: true,
        active: false,
        animate: {duration: 150}
    };
$(function(){
    $("#ticket-event-list").accordion(accordionOptions);
});

// ...

    request.done(function(data){

        $("#ticket-event-list").accordion("destroy");
        // Note I don't even use the data returned by the call
        $.each(document.tickets, function(eventId, eventObj){
            var eventHtml = '<div class="event" id="'+eventId+'">'+eventObj.title+'</div><div class="content">'+eventObj.content+'</div>';
            $("#ticket-event-list").append(eventHtml);
        });
        $("#ticket-event-list").accordion(accordionOptions);
    });

var协议选项={
标题：'.event'，
可折叠的：是的，
活动：错误，
动画：{持续时间：150}
};
$（函数（）{
$（“#门票事件列表”）。手风琴（手风琴选项）；
});
// ...
请求完成（功能（数据）{
$（“#门票事件列表”）。手风琴（“销毁”）；
//注意，我甚至不使用调用返回的数据
$.each（document.tickets，函数（eventId，eventObj）{
var eventHtml=''+eventObj.title+''+eventObj.content+''；
$（“#票务事件列表”）.append（eventHtml）；
});
$（“#门票事件列表”）。手风琴（手风琴选项）；
});

请注意，如果您延迟了附件，您的示例将无法工作：然后，如果您重新初始化小部件，它就会工作：

调用手风琴的

.destroy（）

方法-加载新的html-重新调用手风琴。或者，加载新的html-调用手风琴的

刷新（）

方法。