在jQuery Mobile对话框中设置文本不起作用

时间:2013-08-23 12:07:51

标签: javascript jquery-mobile

我尝试通过javascript动态设置标题和按钮文本。不幸的是,它并没有像我想象的那样奏效。我在jsfiddle添加了我的文本来演示问题:http://jsfiddle.net/tMKD3/8/

HTML code:

<body>
  <div data-role="page" id="start" data-theme="e">
    <div data-role="header" data-position="fixed" data-theme="e">
      <h1 id="startHeader"></h1>
    </div>
    <div data-role="content">   
      <a href="#page" id="buttonP1" onMouseUp="setup()" data-iconpos="right" data-role="button" data-prefetch data-mini="true"></a>
      <a href="#page" id="buttonP2" onMouseUp="setup()" data-iconpos="right" data-role="button" data-prefetch data-mini="true"></a>
      <a href="#page" id="buttonP3" onMouseUp="setup()" data-iconpos="right" data-role="button" data-prefetch data-mini="true"></a>
    </div>
  </div>
  <!-- Dialog -->
  <div data-role="dialog" id="dialog" data-theme="e">
    <div data-role="header" data-theme="e" data-position="fixed" data-close-btn="none">
       <h3 id="dialogHeader"></h3>
    </div>
    <div data-role="content" data-theme="e">
      <a href="#start" type="button" data-role="button" id="dialogButton" data-rel="back"></a>
    </div>
  </div>
</body>

JS代码:

$(document).ready(function(){
  // set button text
  $("buttonP1").text("Test");
  $("buttonP2").text("Test");
  $("buttonP3").text("Test");
}

function setup() {
  // set dialog header text
  $("dialogHeader").text("Dialog");
  $("dialogButton").text("Close");

  $.mobile.changePage('#dialog', {
      transition: 'pop',
      role: 'dialog'
  });
  return false;
}

有人知道我做错了什么以及为什么它不起作用?

非常感谢您的帮助。

问候,托马斯

1 个答案:

答案 0 :(得分:2)

变化

$("dialogHeader").text("Dialog");
$("dialogButton").text("Close");

$("buttonP1").text("Test");
$("buttonP2").text("Test");
$("buttonP3").text("Test");

$("#dialogHeader").text("Dialog");
$("#dialogButton").text("Close");

和:

$("#buttonP1").text("Test");
$("#buttonP2").text("Test");
$("#buttonP3").text("Test");