Question

当我使用javascript更改按钮的innerhtml时，按钮会丢失文本上方和下方的填充，但保留两侧的填充。这是我使用的代码：

document.getElementById("NextBtn").innerHTML="Finish";

我该如何解决这个问题？

Answer 1

操作后，您是否尝试过刷新按钮？

这样的事情：

$('[type="submit"]').button('refresh');

Link to jQuery Mobile Docs

Answer 2

使用jQuery小部件，您通常可以定位将成为原始元素后代的.ui-btn-text元素。例如，这里是来自jQuery Mobile框架的初始化按钮小部件的HTML标记：

<a data-role="button" href="#" data-theme="c" id="test-btn" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Click Me (0)</span>
    </span>
</a>

请注意，文本位于span.ui-btn-text元素内。知道了这一点，我们可以将该元素作为目标来更新文本：

$('#test-btn').find('.ui-btn-text').text('New Text!');

以下是演示：http://jsfiddle.net/qp3uF/

更新

由于您可以讨论几种类型的按钮，以下是如何更新每种按钮的文本：

//<a>
$('a').find('.ui-btn-text').text('New Text');

//<input type="button" /> and <input type="submit" />
$('input[type="button"], input[type="submit"]').val('New Text').prev('.ui-btn-inner').children('.ui-btn-text').text('New Text');

//<button>
$('button').prev('.ui-btn-inner').children('.ui-btn-text').text('New Text');

以下是演示：http://jsfiddle.net/qp3uF/2/

更换innerhtml时，Jquery Mobile按钮会丢失高度

2 个答案:

更新