5

jQuery モバイル ボタンのテキストを動的に更新しようとしています。ボタンは、実際にはボタンとしてスタイル設定されたリンクです。

jQuery mobile documentationによると、button("refresh")javascript 経由でボタンを操作する場合は呼び出す必要があります。しかし、私がこれを行うと、ボタンのスタイルはおかしくなり、半分の高さに縮小され、ボタンはがらくたに見えます。

これは、問題を示す JS Fiddleです。

コードは基本的に次のとおりです。

$(function() {
    // Buttonize
    var $button = $("#myCrapButton");
    $button.button();

    // Change text on click
    $button.click(function() {
        $button.text("Awesome Button");
        $button.button("refresh");
    });
});

さらに、呼び出すbutton("refresh")と javascript エラーが発生します: Cannot call method 'removeClass' of undefined。

.ui-btn-text spanボタン内にネストされた を操作することで、この問題を回避できることを私は知っています。ただし、jquery Mobile の内部動作に関する明確な知識が必要なため、これは間違ったアプローチのように思えます。

更新呼び出しを機能させる方法を教えてもらえますか?

バージョンの使用:

  • jQuery1.9.1
  • jQuery Mobile 1.3.0 (JSFiddle では 1.3.0 ベータ版ですが、最終版は同じ動作です)。

ありがとう！

4

3 に答える 3

3

編集：

申し訳ありませんが、更新機能を特に探していたことがわかりませんでした。お気づきのように、jQM はアンカー タグ ボタンでそれを提供していません。

別の方法は、ボタンを新しいものに置き換えて、jQM に以前のようにマークアップを追加させることです。

JS

$(function() {
    // Buttonize
    var $button = $("#myCrapButton");
    var $clone = $button.clone();
    $button.button();

    // Change text on click
    $button.click(function() {
        $clone.text("Awesome Button");
        $clone.button();
        $button.replaceWith($clone);
    });
});

お役に立てれば！

オリジナル：

jQM が追加するマークアップをドリルダウンするだけです。

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">
            Click me!
        </span>
    </span>
</a>

ボタンのテキストを変更しています：

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
    Awesome Button
</a>

これを行うと、jQM がボタンを表示するために必要な追加のマークアップが失われます。ネストされたスパン テキストを変更する必要があります。

$(function() {
    // Buttonize
    var $button = $("#myCrapButton");
    $button.button();

    // Change text on click
    $button.click(function() {
        $button.children().children().text("Awesome Button");
    });
});

更新は必要ありません:

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">
            Awesome Button
        </span>
    </span>
</a>

実際の例:

于 2013-03-07T13:12:49.680 に答える
2

どうでも; ドキュメントの上部にこれが見つかりました：

注: ボタンのようなスタイルのリンクには、以下の実際のフォームベースのボタンと同じ視覚的オプションがすべてありますが、重要な違いがいくつかあります。リンクベースのボタンはボタン プラグインの一部ではなく、下層の buttonMarkup プラグインのみを使用してボタン スタイルを生成するため、フォーム ボタン メソッド (有効化、無効化、更新) はサポートされません。リンクベースのボタン (または任意の要素) を無効にする必要がある場合は、無効なクラス ui-disabled を JavaScript で自分で適用して、同じ効果を得ることができます。

これは実際には（ボタンテキストを更新する方法の）私の問題を解決しませんが、少なくとも「更新」メソッドがサポートされていない理由に答えます.

編集：

ボタンのテキストを直接更新できることは承知しています。私は元の質問で同じことを言いました：

ボタン内にネストされた .ui-btn-text スパンを操作することで、この問題を回避できることを私は知っています。ただし、jquery Mobile の内部動作に関する明確な知識が必要なため、これは間違ったアプローチのように思えます。

どういうわけか「リフレッシュ」メソッドを機能させることで、この解決策を回避したいと考えていました。しかし、後で見つけた (そして上で引用した) ドキュメントのスニペットに基づいて、「更新」メソッドを使用することはオプションではないことに気付きました。

とすれば; 生成された DOM 要素を明示的にアドレス指定せずに (つまり、jQM API を使用して)、ボタンのテキストを更新する別の方法があることをまだ望んでいましたが、私が見る限り、そうする API メソッドはありません。DOM 要素を更新することが、望ましい結果を達成する唯一の方法のようです。

$(this).find('span span')@Phil Pafford ( ) と @OmarNew2PHP ( )によって提供されるセレクターはどちらも$button.children().children()(私の意見では) 正しくありません。はい、上記の例では完全に機能しますが、ボタンにアイコンを追加すると、次のようになります。

<a id="myCrapButton" href="#" data-icon="delete">Click me!</a>

次に、jQM は、そのアイコンを表示するための追加情報を追加しspanます (簡潔にするためにアンカー タグの属性はトリミングされています)。

<a href="#">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Delete</span>
        <span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span>
    </span>
</a>

上記のセレクターを使用すると、両方の内部spanタグにテキストが追加されます。これは、私が DOM を直接更新することを避けたかった理由のもう 1 つの例です。なぜなら、jQM が何を生成するかを予測することはできません (予測する必要もないからです)。

しかし、結局のところ、ボタン内のテキストを更新する最良の方法は、避けたいと思っていた方法を使用することです。

$button.click(function() {
    $(".ui-btn-text", this).text("Awesome Button");
});

回答ありがとうございます。

于 2013-03-06T23:12:38.213 に答える
1

私はこれに何時間も費やしましたが、最終的にこれがうまくいきました。一種のきれいな解決策。したがって、要素内に次のhtmlを作成するjavascriptがある場合

<div id="buttonParent">
  <a href='#' id="1_button" data-role="button">Click me</a>
  <a href='#' id="2_button" data-role="button">Another Click me</a>
</div>

次に、以下を呼び出すと、ボタンが更新されます。

jQuery('#buttonParent').trigger('create');

以下は機能せず、例外を与えていたことに注意してください。

jQuery('#1_button').button('refresh')

私のような他の誰かを助けるかもしれません。それは時間の無駄でした。jqm はこのバグを修正する必要があります。折りたたみ可能なセットと更新のためにこれらのボタンの周りにラッパーがあり、正常に機能しましたが、ボタンのこの更新はエラーをスローし続けました。とても迷惑でした。

于 2013-08-31T19:56:31.277 に答える