Изменение значения мобильной кнопки jQuery с помощью jQuery

Поскольку jQuery mobile генерирует HTML вокруг вашего элемента input type = "button" , и текст, который вы видите, на самом деле не значение кнопки, а текст внутри сгенерированного ] диапазон . Вы можете либо пройти через DOM в поисках фактического диапазона, либо сказать jQuery повторно сгенерировать HTML-код кнопки, вызвав .button («refresh»), например так:

$("#MyButton").val("changed value");
$("#MyButton").button("refresh");

Последнее рекомендуется, так как оно будет оставайтесь совместимыми с будущими версиями jQuery mobile, при этом обход DOM может прекратиться, если команда jQuery решит изменить структуру HTML-кода, сгенерированного для кнопки.

[устарело]

Использование кнопок ввода имеет этот недостаток, заключающийся в невозможности изменить атрибуты входа способом, который распространялся бы на кнопку jquerymobile. Тогда есть только один способ:

$('#myButton').parent().find('.ui-btn-text').text('zzzzz');

Если кнопка input не нужна для использования приложения без наличия JavaScript (или вы не хотите, чтобы оно работало без javascript) тогда вы всегда должны использовать теги <a>, потому что они могут быть контейнерами.

С jquery.mobile-1.1.0 я испытал что-то немного другое, и мне было трудно просеять ответы, чтобы найти работоспособный ответ. Я задокументировал проблемы, с которыми столкнулся, и решение, которое нашел ниже.

Фрагмент 1

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').html("Check-in to receive points");
  });
</script>

С этим я могу изменить текст, но метод очищает добавленные промежутки и классы, таким образом сжимая кнопку.

HTML

<div id="task_button">
 <a data-role="button" id="checkin_button" data-transition="slide" data-theme="b" href="#task-success" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-b">
 Check-in to receive points
 </a>
 </div>

Фрагмент 2

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').val("Check-in to receive points");
  });
</script>

Это никак не повлияло на текст кнопки.

HTML

<div id="task_button">
  <a data-role="button" id="checkin_button" data-transition="slide" data-theme="b" href="#task-success" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-b">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">
      Original Text.
      </span>
    <span class="ui-icon ui-icon-check ui-icon-shadow ui-iconsize-18">&nbsp;
 </span>
</span>
</a>
</div>

Фрагмент 3

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').val("Check-in to receive points").button("refresh");
  });
</script>

Это сгенерировано следующее сообщение об ошибке:

не может вызвать методы для кнопки до инициализации; попытался вызвать метод refresh

, что меня смутило, потому что эта функция вызывается только после инициализации страницы. Читая далее, я заметил замечание Приянка о рабочем ответе на stackoverflow.com/a/7279843/61821

Фрагмент 4 - Работающий

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button .ui-btn-text').val("Check-in to receive points");
  });
</script>

Лучший jQuery селектор работает как шарм.

это очень легко, есть способ для этого, кнопка («обновить»)

$('#mybutton').val('new Value').button('refresh');

удачи!

Обновлен следующие работы для меня (аналогично ответу от Ковача):

$('#MyButton').html('changed value').button('refresh');

или

$("#MyButton").val("changed value").button("refresh");