如何添加元素和don't失去了风格

Question

我是JQuery Mobile的新手，我正在尝试创建一个元素及其元素列表。这是我的代码：

$(document).ready(function(){
              var text = '{"productes":[' +
              '{"Nom":"Lays","Tipus":"Patata","Categoria":"Aliments","PreuCompra":"0,35","PreuVenda":"1","Comprar":"Sí","Vendre":"Sí","UdM":"kg" },' +
              '{"Nom":"Magdalenes","Tipus":"Pasta","Categoria":"Aliment","PreuCompra":"1","PreuVenda":"1.25","Comprar":"No","Vendre":"S&iacute","UdM":"kg" },' +
              '{"Nom":"Espaguetis Gallina Blanca","Tipus":"Pasta","Categoria":"Aiment","PreuCompra":"0,40","PreuVenda":"1,30","Comprar":"Sí","Vendre":"S&iacute","UdM":"gr" },' +
              '{"Nom":"Fairy","Tipus":"Rentabaixelles","Categoria":"Neteja","PreuCompra":"0,40","PreuVenda":"1,30","Comprar":"No","Vendre":"Sí","UdM":"ml" }]}';

var obj = jQuery.parseJSON(text);
              for (var i=0; i<4; i++) {
        $("#llista").append("<div data-role='collapsible'> <h3>"+ obj.productes[i].Nom +"</h3> <p>Tipus: "+ obj.productes[i].Tipus + "<br>Categoria: " + obj.productes[i].Categoria +"<br>Preu compra: " + obj.productes[i].PreuCompra +"&euro;<br>Preu Venda: " + obj.productes[i].PreuVenda +"&euro;<br>Comprar: " + obj.productes[i].Comprar +"<br>Vendre: " + obj.productes[i].Vendre +"<br>UdM: " + obj.productes[i].UdM +"</p><button data-inline='true'>Eliminar</button><button data-inline='true'>Editar</button></div>");
    }
    $("#nou").click(function(){
         $("#llista").append("<div data-role='collapsible'> <h3>"+ obj.productes[0].Nom +"</h3> <p>Tipus: "+ obj.productes[0].Tipus + "<br>Categoria: " + obj.productes[0].Categoria +"<br>Preu compra: " + obj.productes[0].PreuCompra +"&euro;<br>Preu Venda: " + obj.productes[0].PreuVenda +"&euro;<br>Comprar: " + obj.productes[0].Comprar +"<br>Vendre: " + obj.productes[0].Vendre +"<br>UdM: " + obj.productes[0].UdM +"</p><button id='elim' data-inline='true'>Eliminar</button><button id='edit' data-inline='true'>Editar</button></div>");
    });

})；

当我点击"Nou元素"（新元素）时。看来款式不太合适。我不懂

谢谢！

Answer 1

假设#llista是一个collapsablesetdiv，只需在添加collapsables:后调用.enhanceWithin（）

$("#llista").append(...).enhanceWithin();

这指示jQM增强容器div的所有内容，包括新添加的项。

同样代替

$(document).ready(function(){... 

使用jQM事件

$(document).on("pagecreate", "#pageid", function(){...

@Omar写了一篇关于页面事件的精彩文章，可以在这里找到：

http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/