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

Ответ 1

Обновление 2
Я работал над скрипкой для другого вопроса, и я заметил, что разметка с jQuery Mobile 1.0b2 немного отличается:

<div data-theme="b" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-down-b ui-btn-hover-b" aria-disabled="false">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Show Submit Button</span>
    </span>

    <input type="button" name="answer" id="myButton" data-theme="b" data-answer="4" value="next" class="ui-btn-hidden" aria-disabled="false">
</div>

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

$('#myButton').prev('span').find('span.ui-btn-text').text("Next Text"); 

Обновление
Кредит, в котором кредит должен быть. Как оказалось, @naugtur ответил на этот вопрос, который сделал точно такую ​​же точку, что и мое редактирование, и был опубликован, прежде чем я успел исправить свой первоначальный ответ.

Я не очень хорошо знаком с jQuery Mobile и тот факт, что вы использовали <input> для кнопки, не регистрировался, когда я сначала ответил. Вот мой обновленный ответ с рабочим примером, показывающим, как вы можете это сделать.

В случае <input type="button" /> jQuery Mobile, похоже, скрывает элемент <input> и создает новый элемент <a>, который имеет стиль, похожий на кнопку. Вот почему, когда вы пытаетесь получить и установить текст, используя идентификатор <input> в качестве селектора, он не работает, так как <span> не имеет текста, который вы видите на экране. Сгенерированная разметка выглядит примерно так:

<!-- This 'a' button is added dynamically by jQuery Mobile, for the input element that follows it -->
<a role="button" href="#" data-theme="c" 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">My Value</span>
    </span>
</a>

<input type="button" data-role="button" value="My Value" id="myButton" name="answer" class="ui-btn-hidden ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" tabindex="-1" data-theme="c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text"></span>
    </span>
</input>

Я не пробовал достаточно примеров, чтобы быть полностью уверенным, но это должно работать

$("#myButton").prev('a').find('span.ui-btn-text').text("New Text")

Здесь рабочий пример, показывающий, как изменить текст для обоих типов кнопок (<a> и <input type="button">).

Я бы не рекомендовал использовать эту кнопку над <a>, если вы можете ей помочь, хотя, поскольку не существует id, и мой подход, по крайней мере, полагается на то, что <a>, соответствующий <input type="button" /> появляется непосредственно перед элементом <input>.

Ответ 2

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

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

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

Ответ 3

[устаревшее]

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

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

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

Ответ 4

Это работает для меня:

$('#idOfOriginalButton').prev('.ui-btn-inner').children('.ui-btn-text').html('new text');

решение: http://forum.jquery.com/topic/changing-text-works-except-for-buttons

Ответ 5

С 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 работает как шарм.

Ответ 6

Обновлено для меня работает следующее (похоже на ответ от kovač):

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

или

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