.html（）/。append（）只有作品，为什么？

Question

我正在建立一个移动应用程序起诉Phonegap和Jquery移动。我试图用javascript构建一个可重用的菜单，但是我遇到了一个问题。使用菜单的第一页加载得很好，但第二页使用相同的代码加载它，只显示一个没有任何内容的菜单。

我收到了以下代码：

这是我插入菜单脚本的方式：

<div data-role="panel" id="navpanel" data-theme="a" data-display="reveal" data-dismissible="false" data-position="left">
    <script src="menuContent.js"></script>
    </div>

这就是我在JavaScript中构建菜单的方式：

$( "#navpanel" ).html('<div data-role="controlgroup" id="controlgroup" data-corners="false">' +
'<a href="prisMatch.html" id="prisMatchMenuButton" data-role="button">Pris Match</a>' +
'<a href="archive.html" id="archive" data-role="button">Arkiv</a>' +
'<a href="remember.html" id="remember" data-role="button">Husk</a>' +
'<a href="about.html" id="about" data-role="button">Om</a>' +
'</div>');

非常感谢任何解决此问题的帮助

SOLUTION：

索引头链接指向菜单中的内容：

<script src="menuContent.js" type="text/javascript"></script>

页：

<div data-role="panel" id="navpanel" data-theme="a" data-display="reveal" data-dismissible="false" data-position="left"></div>

menuContent.js：

$(document).on("pagebeforecreate", "[data-role=page]", function () {
    $("#navpanel", this).html('<div data-role="controlgroup" id="controlgroup" data-corners="false">' +
        '<a href="prisMatch.html" id="prisMatchMenuButton" data-role="button">Pris Match</a>' +
        '<a href="archive.html" id="archive" data-role="button">Arkiv</a>' +
        '<a href="remember.html" id="remember" data-role="button">Husk</a>' +
        '<a href="about.html" id="about" data-role="button">Om</a>' +
        '</div>');
});

Answer 1

动态添加元素到面板时，您必须在追加元素后在活动页面上调用.trigger("pagecreate");。

解决方案1 ​​

$.mobile.activePage.trigger("pagecreate");

或者

$("#Page_id").trigger("pagecreate");

  

<强> Demo

---

解决方案2

在创建页面pagebeforecreate之前添加元素。

$(document).on("pagebeforecreate", "[data-role=page]", function () {
  $("#navpanel", this).html('<div data-role="controlgroup" id="controlgroup" data-corners="false">' +
   '<a href="prisMatch.html" id="prisMatchMenuButton" data-role="button">Pris Match</a>' +
   '<a href="archive.html" id="archive" data-role="button">Arkiv</a>' +
   '<a href="remember.html" id="remember" data-role="button">Husk</a>' +
   '<a href="about.html" id="about" data-role="button">Om</a>' +
   '</div>');
});

  

Demo