text - 使用 jquery 移动更改按钮上的文本。

Question

我想使用 jquery mobile 更改按钮上的文本。如果我将数据角色更改为无，它会起作用，但随后我会丢失格式。

    <fieldset class="ui-grid-a" data-inline="true">
       <div class="ui-block-a"><button class="cl_button1" type="submit" 
       data-theme="c" data-icon="home" data-iconpos="top">Click Me</button>
       </div>
    </fieldset>


 $('.cl_button1').val('some text');

另一个帖子建议这样做，但没有用。

 $("cl_button1 .ui-btn-text").text("some text");

Answer 1

使用 Firebug 我发现 jQuery Mobile 创建的 HTML 标记如下:

<fieldset data-inline="true" class="ui-grid-a">
    <div class="ui-block-a">
        <div data-theme="c" class="ui-btn ui-btn-icon-top ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false">
            <span class="ui-btn-inner ui-btn-corner-all">
                <span class="ui-btn-text">some text</span>
                <span class="ui-icon ui-icon-home ui-icon-shadow"></span>
            </span>
            <input type="hidden" value="">
            <input type="hidden" value="">
            <input type="hidden" value="">
            <button data-iconpos="top" data-icon="home" data-theme="c" type="submit" class="cl_button1 ui-btn-hidden" aria-disabled="false">Click Me</button>
        </div>
    </div>
</fieldset>

您可以看到 ui-btn-hidden类已添加到原始 <button>元素和按钮的显示实际上是通过使用 <span> 呈现的。 <button> 上方的标签标签。

因此，要更改此 jQuery Mobile 呈现元素的文本，您可以使用这样的选择器:

$('.cl_button1').siblings('.ui-btn-inner').children('.ui-btn-text').text("some text");

或者，如果您想在点击时更改按钮的文本，您可以这样做:

$('.cl_button1').bind('click', function () {
    $(this).siblings('.ui-btn-inner').children('.ui-btn-text').text("some text");
});

这是一个用于演示的 jsfiddle:http://jsfiddle.net/SfySk/1/