data-role =“button"样式不应用于js函数

data-role="button" style is not applied on js function

本文关键字：样式 应用于 js 函数 quot button data-role      更新时间：2023-09-26

在_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按钮，但在视觉上没有。

当动态更改元素内容时，应该重新创建元素，以便应用jquery mobile的增强标记。在本例中:

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

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

我推荐这种方法，因为它不依赖于html标记，这在jQuery移动版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>

这是因为data-role设置了一些span，呈现的代码看起来像:

<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>

您当前的代码将覆盖跨度和格式变得混乱。必须替换内部span的文本-使用以下命令更新文本:

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

js小提琴:http://jsfiddle.net/BQMTP/2/

相关文章：