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

时间:2013-06-24 10:27:21

标签: jquery jquery-ui jquery-ui-accordion

我遇到一个问题,在手风琴启动之前,手风琴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);
});
});

2 个答案:

答案 0 :(得分:2)

只需将其放入.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()

创建手风琴之前已加载手风琴

Literaly你的意思是等到我的.getJSON() .done()首先插入.html() 然后执行$.accordion()。这完全由上面的代码翻译。

答案 1 :(得分:1)

也许您需要在创建手风琴后触发的create事件 - &gt; http://api.jqueryui.com/accordion/#event-create