Question

使用jquery我试图在div容器中追加JQM链接按钮。链接按钮仅显示一次，下次显示为简单锚点。

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个链接按钮。但是当第二次触发相同的功能（点击浏览器后退按钮并返回）时，按钮显示为本机锚点。

可能是什么问题？

Answer 1

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

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

Answer 2

你必须告诉jQuery Mobile你创建的元素是一个按钮。你必须使用button()方法。

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

在div中动态附加链接按钮

2 个答案: