data-role="button" 样式不适用于 js 函数答案

【问题标题】：data-role="button" style is not applied on js functiondata-role="button" 样式不适用于 js 函数
【发布时间】：2014-05-09 00:19:27
【问题描述】：

在标题内的 _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="button）。在 firebug 中，div 的数据角色按钮设置正确，但视觉上没有。

【问题讨论】：

data-role="button" 的 css 是什么样的？
测试时，css在调用js函数之前正确应用。 jquery mobile 中按钮的标准 css 类。
请检查您的问题，我认为您有问题。它工作正常。
我不认为这是显示/隐藏的问题，而是更改文本。请参阅以下仅更新文本的 jsfiddle - jsfiddle.net/BQMTP

标签： javascript jquery jquery-mobile

【解决方案1】：

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

<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 小提琴：http://jsfiddle.net/BQMTP/2/

【讨论】：

【解决方案2】：

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

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

js 小提琴：http://jsfiddle.net/gfg/Z9xvd/

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

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

jQuery 移动版 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 移动版 1.4.2

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

【讨论】：