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

Question

I've got a simple jQueryUI Accordion working, which I populate afther the page has loaded. 我有一个简单的jQueryUI手风琴，在页面加载后填充它。 The following code works fine: 以下代码可以正常工作：

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

The html that gets inserted if the page is loaded is this: 如果加载页面，将插入的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>

The json with which I populate the accordion should however first be taken from an api. 但是，我应该首先从api中获取用于填充手风琴的json。 So I rewrote the js as can be seen below. 因此，我重写了js，如下所示。 Please note that I don't even use the results of the API call. 请注意，我什至不使用API调用的结果。 I still use the json which I write in the js.: 我仍然使用我在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);
});

But the resulting html is only as follows: 但是生成的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>

I also tried using the .accordion() method after I draw the html to the DOM, but that doesn't help either. 在将html绘制到DOM之后，我还尝试使用.accordion()方法，但这也无济于事。 Moreover, in the first piece of code (which worked fine) the .accordion() method is also used before the html gets drawn to the DOM. 此外，在第一段代码（效果很好）中，在将html绘制到DOM 之前，还使用了.accordion()方法。

Does anybody know why an API call prevents the accordion to work? 有人知道为什么API调用会阻止手风琴工作吗？ All tips are welcome! 欢迎所有提示！

Answer 1

The accordion can't handle dynamically added content. 手风琴无法处理动态添加的内容。 Try wrapping your appends in a destroy and reinitialise calls: 尝试将您的追加包装在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. 例如。 notice how your example won't work if you delay the appends: http://jsfiddle.net/7b2eegdh/ and then it does works if you reinitialise the widget: http://jsfiddle.net/7b2eegdh/1/ 请注意，如果延迟了附件，您的示例将不起作用： http : //jsfiddle.net/7b2eegdh/ ，然后如果您重新初始化小部件，它将起作用： http : //jsfiddle.net/7b2eegdh/1/

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-11-06 16:25:43

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-11-06 16:25:43

解决方案1
2 已采纳 2014-11-06 16:25:43