Javascript 从JSON数据动态创建Jquery移动导航栏

我正试图从提供json数据的web api获取的数据中动态创建一个导航栏。代码如下： 如果我使用：

    <div data-role="navbar">
      <ul>
        <li><a href="a.html">One</a></li>
        <li><a href="b.html">Two</a></li>
    </ul>
   </div>

---

直接在html代码中工作很好，但这不是我想要的。我希望能够从中的数据创建列表元素，就像gist中显示的代码一样。任何人都可以为我指出正确的方向？

一旦你为navbar小部件编造了HTML，你只需在小部件上调用

.trigger（'create'）

：

var myNavbar = $('<div data-role="navbar"><ul><li><a href="a.html">One</a></li><li><a href="b.html">Two</a></li></ul></div>');
$('#some-container').append(myNavbar).trigger('create');

var myNavbar=$（'
）；
$（“#某个容器”）.append（myNavbar.trigger（'create'）；

下面是一个演示：

这将触发jQuery Mobile初始化小部件

例如：

var url = "http://23.21.128.153:3000/regions.json";var jsonresults;
$.getJSON(url,function(data){
    var output = [];
    $.each(jsonresults, function(i,v){
        output.push('<li><a href="' + jsonresults[i].link + '">' + jsonresults[i].name + '</a></li>');
    });
    $('#main-content').append('<div data-role="navbar">' + output.join('') + '</div>').trigger('create'); 
});

var url=”http://23.21.128.153:3000/regions.json";var-jsonresults；
$.getJSON（url、函数（数据）{
var输出=[]；
$.each（jsonresults，function（i，v）{
output.push（“
”）；
});
$（'#main content'）.append（''+output.join（''）+''）.trigger（'create'）；
});

---

请注意我是如何编制HTML的，并使用了

.append（）

函数。

一旦您为navbar小部件编制了HTML，您只需在小部件上调用

.trigger（'create'）

：

var myNavbar = $('<div data-role="navbar"><ul><li><a href="a.html">One</a></li><li><a href="b.html">Two</a></li></ul></div>');
$('#some-container').append(myNavbar).trigger('create');

var myNavbar=$（'
）；
$（“#某个容器”）.append（myNavbar.trigger（'create'）；

下面是一个演示：

这将触发jQuery Mobile初始化小部件

例如：

var url = "http://23.21.128.153:3000/regions.json";var jsonresults;
$.getJSON(url,function(data){
    var output = [];
    $.each(jsonresults, function(i,v){
        output.push('<li><a href="' + jsonresults[i].link + '">' + jsonresults[i].name + '</a></li>');
    });
    $('#main-content').append('<div data-role="navbar">' + output.join('') + '</div>').trigger('create'); 
});

var url=”http://23.21.128.153:3000/regions.json";var-jsonresults；
$.getJSON（url、函数（数据）{
var输出=[]；
$.each（jsonresults，function（i，v）{
output.push（“
”）；
});
$（'#main content'）.append（''+output.join（''）+''）.trigger（'create'）；
});

---

请注意我是如何编制HTML的，并使用了

.append（）

函数。

我也遇到了同样的问题（我一直在重新生成导航栏，具体取决于获取的数据），我的解决方案如下：

var-navBar='
'；
导航栏+='
需要多少行
'；
导航栏+='
'；
$（'#invNavBarAction'）。删除（）；
$（'#invNavBarContainer'）。追加（$（navBar））；
$（'#invNavBarAction'）.navbar（）；

HTML:

---

我也遇到了同样的问题（我一直在根据提取的数据重新生成导航栏），我的解决方案如下：

var-navBar='
'；
导航栏+='
需要多少行
'；
导航栏+='
'；
$（'#invNavBarAction'）。删除（）；
$（'#invNavBarContainer'）。追加（$（navBar））；
$（'#invNavBarAction'）.navbar（）；

HTML:

在某个地方看到了关于.trigger（'create'）将Jquery Mobile添加到动态添加的元素，但不确定如何使用它。您当前的方法存在哪些问题？Jquery Mobile样式未加载，它只是加载元素，而不是使用jquery mobile添加到样式元素中的类。看到了一些关于.trigger（'create'）的内容，将jquery mobile添加到动态添加的元素中，但不确定如何使用它。您当前的方法有什么问题？jquery mobile样式没有加载，它只是加载元素，而不是jQueryMobile为样式化添加到元素中的类。谢谢，我在示例中没有看到.trigger（'trigger'）。我应该把它放在哪里？我的意思是，使用你的示例，我得到了相同的结果，没有应用Jquery样式的列表。我更新了答案，只需在添加HTML的元素上调用它，如果这让你感到困难，那么就这样做：

$（'#main content'）.append（…）.children（）.last（）.trigger（'create'）

。这有点奏效，但只对元素有效，jquerymobile添加了一个名为ui链接的类，但ul和li上的元素样式仍然没有加载。你想让我用我当前的代码更新要点吗？我在本地尝试了，我的浏览器给了我这个警告。2在WebKit中，event.layerX和event.layerY已损坏并已弃用。它们将在不久的将来从发动机上拆下。在JSFIDLE工作得很好。我明白了，泰。我必须对父元素执行触发器（'create'）$（“#主要内容”）.trigger（'create'）；谢谢，我在示例中没有看到.trigger（'trigger'）。我应该把它放在哪里？我的意思是，使用你的示例，我得到了相同的结果，没有应用Jquery样式的列表。我更新了答案，只需在添加HTML的元素上调用它，如果这让你感到困难，那么就这样做：

$（'#main content'）.append（…）.children（）.last（）.trigger（'create'）

。这有点奏效，但只对元素有效，jquerymobile添加了一个名为ui链接的类，但ul和li上的元素样式仍然没有加载。你想让我用我当前的代码更新要点吗？我在本地尝试了，我的浏览器给了我这个警告。2在WebKit中，event.layerX和event.layerY已损坏并已弃用。它们将在不久的将来从发动机上拆下。在JSFIDLE工作得很好。我明白了，泰。我必须对父元素执行触发器（'create'）$（“#主要内容”）.trigger（'create'）；