jQuery Mobileのボタンのテキストをコードで変更する

jQuery Mobileでは、以下のHTML要素は自動的に「ボタン」になる。

• button要素・input要素

  <!-- HTML -->
  <button>AAA</button>
  <input type="button" value="AAA">
  

• a要素(data-role=”button” を指定)

  <!-- HTML -->
  <a href="#pgTTMain" data-role="button" id="btnid" data-icon="arrow-l">AAA</a>
  

これらはいずれもテキストが「AAA」のボタンが生成される。このAAAという文字を、(後で)コードで動的に変更したい場合は、少々工夫がいる。(jQuery MobileがDOMをいろいろ操作するので、元のHTML上で変更してもうまくいかない。ボタンそのものをいったん削除し、あらたに生成することも考えられるが、イベントハンドラとの紐付け等もあるので、既存のボタンを生かすことを考える。)

結論から言うと、以下のようにすると実現できる。

// JavaScript
var label = 'new text'; // ボタンの新しいテキスト
$(ボタン).children('.ui-btn-inner').children('.ui-btn-text').text(label);

時刻表では「一覧画面でそのタイトル」をボタンにしている。例えば、駅一覧画面では「路線名」をボタンにし、クリックでもとの一覧画面に戻るようにしている。以下の例では、「磐越西線」｢岩泉線」がボタンになっている。