替换innerhtml时，Jquery Mobile按钮失去高度答案

【问题标题】：Jquery Mobile button looses height when innerhtml is replaced替换innerhtml时，Jquery Mobile按钮失去高度
【发布时间】：2012-02-22 17:48:23
【问题描述】：

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

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

我该如何解决这个问题？

【问题讨论】：

你能显示按钮的 HTML 和样式吗？
我从未在按钮上使用过 innerHTML。我认为我使用价值。我离这儿很远吗？
.value 有同样的效果。

标签： javascript jquery html jquery-mobile innerhtml

【解决方案1】：

使用 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/

【讨论】：

我的按钮的 html 是：<a href="" data-role="button" id="NextBtn" onClick="next()">Next</a>，我尝试添加：$('#NextBtn').find('.ui-btn-text').text('Finish');，之前我有document.getElementById("NextBtn").innerHTML="Finish";。它仍然正确替换了文本，但格式问题仍然存在。
@redleaf 在我发布的演示中它适用于我。我的演示也适合你吗？
抱歉，这是我的错误 - 现在可以正常工作了！感谢您的帮助。

【解决方案2】：

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

类似这样的：

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

Link to jQuery Mobile Docs

【讨论】：

尝试刷新按钮会导致此错误：Uncaught cannot call methods on button prior to initialization; attempted to call method 'refresh':jsfiddle.net/qp3uF/3。如果您删除 'refresh' 以初始化小部件，则不会发生任何事情：jsfiddle.net/qp3uF/4
我以为问题是关于表单按钮的，这就是刷新的作用。基于链接的按钮不使用刷新功能。我的假设不好。