Question

我有一个简单的jQueryUI 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>

<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>

加载页面时插入的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>

然而，我用手风琴填充的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);
});

但结果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>

我在之后尝试使用.accordion()方法我将html绘制到DOM，但这也没有帮助。此外，在第一段代码（工作正常）中，{<1}}方法也被用于之前 html被绘制到DOM。

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

Answer 1

手风琴无法处理动态添加的内容。尝试将您的追加包装在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);
    });

EG。请注意，如果您延迟添加附加内容，您的示例将如何工作：http://jsfiddle.net/7b2eegdh/然后如果您重新初始化窗口小部件，它会起作用：http://jsfiddle.net/7b2eegdh/1/

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

1 个答案: