jquery手风琴没有初始化动态创作不确定为什么

时间:2015-04-02 02:06:42

标签: javascript jquery ajax

我正在尝试从rest ajax查询中动态初始化jquery accordion插件。没有控制台错误只是实际上没有手风琴数据。

我不太确定是什么问题,因为我对jquery不太好。任何帮助将不胜感激。

<!DOCTYPE HTML>

<html>
    <head>
        <title>TheWayWardJourney</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
        <script src="js/jquery.min.js"></script>
        <script src="js/jquery.scrolly.min.js"></script>
        <script src="js/jquery.scrollzer.min.js"></script>
        <script src="js/skel.min.js"></script>
        <script src="js/skel-layers.min.js"></script>
        <script src="js/init.js"></script>      
        <noscript>

            <link rel="stylesheet" href="css/skel.css" />
            <link rel="stylesheet" href="css/style.css" />
            <link rel="stylesheet" href="css/style-wide.css" />
        </noscript>
        <script>
            function updateMessages() {
              var mess = $.getJSON( "http://10.0.0.6:3000/page_contact?read=neg.no&username=eq.zukeru&order=time.desc", function() {
                console.log( "success" );
              })
              .done(function( data ) {
                var html_insert = '<div id="accordion">'
                var stats = ''
                //console.log(data);
                console.log( "second success" );    
                  $.each( data, function( i, item ) {
                    html_insert = html_insert + '<h3>From: ' + item.name + '" </h3>' + '<div><p>Email: ' + item.email + '</p>' + 'Message: ' + item.message + '</p></div>';
                  });
                document.getElementById("messages").innerHTML = html_insert + '</div>';
              })
                setTimeout(function(){  updateMessages(); }, 10000);
            }
            updateMessages();

        </script>
    </head>
    <body>
                    <section id="mess" class="four">
                        <div class="messaged">
                            <header>
                                <h2>Messages</h2>
                            </header>
                            <p id='messages'></p>
                        </div>
                    </section>
    </body>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
              $(function() {
                $( "#accordion" ).accordion();
              });
</script>
</html>

1 个答案:

答案 0 :(得分:1)

一个问题:你正在打电话

$(function() {
  $("#accordion" ).accordion(); 
});
在你的ajax请求完成之前

,因此没有acci。

之后需要调用$("accordion").accordion();
document.getElementById("messages").innerHTML = html_insert + '</div>';
// call accordion function here
$("#accordion" ).accordion();