jquery - 在 div 内动态附加链接按钮

Question

使用 jquery，我尝试在 div 容器内附加 JQM 链接按钮。链接按钮仅显示一次，下次以后它将显示为简单的 anchor 。

HTML 页面

<div id='pg_menu' data-role="page"> 
  <div data-role="content" id="pg_menu_content">

  </div>
</div>

目标是在 #pg_menu_content 中动态加载链接按钮。

Jquery 代码

function loadMenuPage(){
  $('#pg_menu_content').empty();
  $('#pg_menu_content').append("<div data-role='fieldcontain'><a href='a' data-role='button'>A</a></div>");
  $('#pg_menu_content').append("<div data-role='fieldcontain'><a href='b' data-role='button'>B</a></div>");
  $('#pg_menu_content').append("<div data-role='fieldcontain'><a href='c' data-role='button'>C</a></div>");
  $.mobile.changePage('#pg_menu');
}

第一次调用loadMenuPage方法时，所有3个链接按钮都会正确显示。但是，当第二次触发相同的功能时(单击浏览器后退按钮并返回)，按钮会像 native anchor 一样显示。

可能是什么问题？

Answer 1

在 pagebeforecreate 上附加新项目，以便使用 JQM 样式增强它们，或者在附加它们之前手动增强它们。

$("<a href='b' data-role='button'>B</a>").button().appendTo('#pg_menu_content');