如何确保在使用.html()创建手风琴之前已加载手风琴

Question

我遇到了一个问题，在Accordo启动之前，Accordo html被首先使用.html（）注入到标签上，从而使注入的html看起来像普通的html。

这是我的脚本代码：

$(function() {
$( "#accordion1" ).accordion({
          heightStyle: "content",
          collapsible: true,
          active:false,
          activate:"refresh",
          animate:false
    });
$.getJSON( 'http://localhost/media_books/index.php/new_books.json?provider_id=1&limit=99&offset=1')
    .done(function( json ) {    
        var html = '<div id="accordion1" style="font-size:smaller;" class = "accordion">';
        for ( var obj in json.data) {
            var att = json.data[obj].attributes;
            html += '<h3>' + att.title + '</h3>';
            html += '<div >';
            html += "<p>" + att.author + "</p>";
            html += '</div>';
        }
        html += '</div>';
        $("#tabs_1").html(html);
});
});

Answer 1

只需将其放入.done()

$(function() {

    $.getJSON( 'http://localhost/media_books/index.php/new_books.json?provider_id=1&limit=99&offset=1')
        .done(function( json ) {    
            var html = '<div id="accordion1" style="font-size:smaller;" class = "accordion">';
            for ( var obj in json.data) {
                var att = json.data[obj].attributes;
                html += '<h3>' + att.title + '</h3>';
                html += '<div >';
                html += "<p>" + att.author + "</p>";
                html += '</div>';
            }
            html += '</div>';
            $("#tabs_1").html(html);
            $( "#accordion1" ).accordion({
              heightStyle: "content",
              collapsible: true,
              active:false,
              activate:"refresh",
              animate:false
            });
    });
});

为什么在这里因为：

如何确保手风琴已加载，然后再使用.html（）创建手风琴

从字面上看，你的意思是，等到我的.getJSON()是.done()时，先插入.html()，然后执行$.accordion()。这正是由上面的代码翻译的。

Answer 2

也许您需要create事件，它是在手风琴创建之后触发的-->http://api.jqueryui.com/accordion/#event-创建