Javascript 在jQuery mobile中动态创建具有列表视图的选项卡

我试图在JQM中通过单击按钮动态创建包含ListView的选项卡。目前，我使用JS数组，它包含最终将通过ajax填充的样本数据。经过研究，似乎我应该触发triggercreate或触发refresh，但显然，我没有正确地执行。代码如下： HTML:

导航栏演示 填满

Javascript:

编辑：

---

我最初的意图是在导航栏中绘制3个选项卡，它们是ListView，在单击选项卡时可以看到这些选项卡

这是您在JSFIDLE中运行的代码-关于这一点，您能否进一步解释您试图实现的目标和未按预期工作的目标？谢谢您的代码片段！我的实现有几个问题：1。单击“填充”按钮时，导航栏已正确绘制，但内部选项卡立即可见，而不是2。当你多次点击填充按钮时，你会看到格式良好的listview，但会在意想不到的地方弹出。这是否更接近你想要的。。。

function fillCategories() {
var navElements =   [{"category_sublist_id":"1","category_sublist_name":"Europe"},
                    {"category_sublist_id":"2","category_sublist_name":"Asia"},
                    {"category_sublist_id":"3","category_sublist_name":"Americas"}];
var categoriesTabs = $('<div id="categories">')
                        .attr("data-role","tabs")
                        .appendTo("#decisions");
var navBar = $("<div>").attr("id","categoriesNames")
                        .attr("data-role","navbar")
                        .appendTo("#categories");
var listElements =  [{"sublist_row_id":"1","category_sublist_id":"1","sublist_name":"Great Britain"},
                    {"sublist_row_id":"2","category_sublist_id":"1","sublist_name":"Sweden"},
                    {"sublist_row_id":"3","category_sublist_id":"1","sublist_name":"France"},
                    {"sublist_row_id":"4","category_sublist_id":"1","sublist_name":"Germany"}];

$("#categoriesNames").append($("<ul>").attr("id","categoriesUl"));
$(navElements).each(function(){
        $("#categoriesUl").append($("<li>")
            .attr("value", this.category_sublist_id)
            .append($("<a>")
                .attr("href", "#sublist"+this.category_sublist_id)
                .attr("data-theme","a")
                .attr("data-ajax","false")
                .text(this.category_sublist_name)));
});

$("#categories").append(navBar).trigger("create");
categorySublistView("categories", "sublist2", listElements);}

function categorySublistView(elementId, listLink, listData) {
var listId = listLink+"id";
var tab = $("<div>").attr("id",listLink)
                    .addClass("ui-content")
                    .appendTo("#"+elementId);
var list = $("<ul>").attr("data-role","listview")
                    .attr("data-inset","true")
                    .attr("data-icon","false")
                    .attr("id", listId)
                    .appendTo("#"+listLink);
$(listData).each(function(){
    var li = $("<li/>")
        .attr("value",this.sublist_row_id)
        .appendTo("#"+listId);
    var link =$("<a>")
        .attr("href", "#")
        .text(this.sublist_name)
        .appendTo(li);
});
if ( $('#'+listId).hasClass('ui-listview')) {
    $('#'+listId).listview('refresh');
 }
else {
    $('#'+listId).trigger('create');
 }}