Question

在标题内的_Layout页面上我有div，它最初在页面加载时隐藏。

 <div data-role="header">
    <div id="myDiv" data-role="button"></div>
 </div>

...
$(document).bind("pageinit", function () {
     $("div#myDiv").hide();
});

在其他页面的某处onclick动作连接到js函数，它将文本内容添加到myDiv，之后我显示myDiv就像

<script>
   ...
      var textToAppend = "some text";
      $("div#myDiv").html(textToAppend);  
      $("div#myDiv").show();
   ...
</script>

Div显示文字但在视觉上没有预期的样式（data-role =＆＃34;按钮）。在firebug div中正确设置了数据角色按钮，但在视觉上没有。

Answer 1

当您动态更改元素内容时，您应该重新创建元素，以便应用jquery mobile的增强标记。在这种情况下：

$("div#myDiv").html(textToAppend).button();

js fiddle：http://jsfiddle.net/gfg/Z9xvd/

我会推荐这种方法，因为它不依赖于html标记，它在jQuery mobile的1.4版本中发生了很大的变化。

例如，以下html：<input id="btnShow" type="submit" value="show">将为：

jQuery mobile 1.3.2

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-submit ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">show</span>
    </span>
    <input id="btnShow" type="submit" value="show" class="ui-btn-hidden" data-disabled="false">
</div>

jQuery mobile 1.4.2

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
    show
    <input id="btnShow" type="submit" value="show">
</div>

Answer 2

这是因为数据角色设置了一些跨度，呈现的代码如下所示：

<div id="myDiv" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">some test</span>
    </span>
</div>

您当前的代码将覆盖跨度，格式化会搞砸。您必须替换内部范围的文本 - 使用以下内容更新文本：

$("div#myDiv .ui-btn-text").text(textToAppend);

js fiddle：http://jsfiddle.net/BQMTP/2/

data-role =“button”样式不适用于js函数

2 个答案: