Question

我想使用jquery mobile更改按钮上的文字。如果我将data-role更改为none，那么它会起作用，但之后我会丢失格式。

    <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>标记来呈现按钮的显示1}}标签。

因此，要更改此jQuery Mobile渲染元素的文本，您将使用这样的选择器：

<button>

或者如果你想在点击时更改按钮的文字，你可以这样做：

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

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

Answer 2

所有

上述解决方案似乎不适用于JQM 1.1.1。一个非常简单的方法就是打电话。

$('.cl_button1').text('some text').button('refresh');

根据http://jquerymobile.com/test/docs/buttons/buttons-methods.html，您只能在按钮上调用三种方法。这应该使您的按钮的内部状态与JQM UI装饰保持一致，并且更加强大，以防止按钮在未来变得非常漂亮。

Answer 3

初始化

后，在jqm 1.4.5版本中

$('#btn_input').parent().contents().filter(function(){
  return this.nodeType === 3;
}).replaceWith('New Text');

它可以在不破坏绑定事件的情况下工作。

Answer 4

当你说这不起作用时：

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

你忘记了。在cl_button之前表示您正在尝试选择一个类
我没有看到.ui-btn-text被用作任何类

我使用此代码使用您的代码：

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

在此测试：http://jsfiddle.net/S9asF/

Answer 5

更好的解决方案是刷新页面：

$(currentPage).trigger('create');
$(currentPage).page();

Answer 6

$('#buttonx').children('.ui-btn-inner').children('.ui-btn-text').text("Some Text");

使用jquery mobile更改按钮上的文本。

6 个答案: