изменить текст на кнопке с помощью jquery mobile.

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

All

Вышеуказанные решения не работают с JQM 1.1.1. Очень простой способ сделать это - позвонить.

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

В соответствии с http://jquerymobile.com/test/docs/buttons/buttons-methods.html, есть только три метода, которые можно вызвать с помощью кнопки. Это должно поддерживать внутреннее состояние вашей кнопки в соответствии с украшением пользовательского интерфейса JQM и быть более устойчивым к изменениям в том, как кнопки станут «красивыми» в будущем.

Answer 2

Используя Firebug, я обнаружил, что HTML-разметка, созданная jQuery Mobile, выглядит следующим образом:

<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> origional, и отображение кнопки фактически отображается с помощью тегов <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/

Answer 3

в jqm версии 1.4.5, после инициализации

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

Работает без уничтожения связанных событий.

Answer 4

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

Answer 5

Лучшее решение - обновить страницу:

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

Answer 6

Когда вы сказали, что это не сработало:

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

1. Вы забыли.перед cl_button, чтобы указать, что вы пытаетесь выбрать класс
2. . Я не вижу нигде .ui-btn-text, используемого в качестве класса

Я получил ваш код на работуиспользуя это:

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

Test Here: http://jsfiddle.net/S9asF/