Question

我最近开始创建一个带有phonegap和jquery mobile的应用程序，它可以加载一个json并创建一个元素，这是我的代码。

<script type="text/javascript">
            $(document).ready(function(){
                $("#boton").click(function(){
                    $.getJSON("json url",function(data){
                        var instrucciones = data.Instrucciones;
                        document.getElementById("titulos").innerHTML = instrucciones;
                        var acordeonJSON = $('<div data-role="collapsible" id="accordeon"><h3>hi</h3><p>Hello</p></div>');
                        $.each(data.Items,function(llave,valor){
                            if(valor.nombreItem !="")
                            {
                                $("#accordeon").append(acordeonJSON);
                            }
                        });
                    });//Llave getJSON
                });//Llave boton click
            });

        </script>

这是我的Html结构

<div data-role="page" id="home">
        <div data-role="header" id="titulo">
            <h1 id="titulos"></h1>
        </div>

        <div data-role="main" class="ui-content" id="div1">
            <button id="boton">Presioname</button>
            <div id="instrucciones"></div>

            <div data-role="collapsible-set" data-theme="c" id="accordeon">
                <!--In this part i want to show the content of my json-->
            </div>
        </div>

        <div data-role="footer" data-position="fixed">
            <h1>Footer</h1>
        </div>
</div>

我的问题是为什么我不能在jquery中创建我的元素，创建的元素显示没有样式。

Answer 1

在collapsibleset中追加所有新的dom元素后，请致电$("#accordeon").collapsibleset( "refresh" ).enhanceWithin();

例如：

$("#boton").click(function(){
   var acordeonJSON = $('<div data-role="collapsible" id="accordeon1"><h3>hi</h3><p>Hello</p></div>'); 
   $("#accordeon").append(acordeonJSON).collapsibleset("refresh").enhanceWithin();
});

这是 DEMO

为什么我的元素没有风格显示？

1 个答案: