当innerhtml被替换时，Jquery Mobile按钮失去高度

Jquery Mobile button looses height when innerhtml is replaced

本文关键字：Mobile 按钮 失去 高度 Jquery innerhtml 替换      更新时间：2023-09-26

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

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

我该如何解决此问题？

使用jQuery小部件，您通常可以将.ui-btn-text元素作为原始元素的后代。例如，这里是jQueryMobile框架中初始化按钮小部件的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/

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

类似这样的东西：

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

链接到jQuery Mobile Docs

相关文章：