20

メニューの項目をクリックしてリンクボタンの値を更新したいと思います。

HTML:

<div id="menu">
    <ul data-role="listview" data-icon="false">
        <li><a href="#">Value A</a></li>
        <li><a href="#">Value B</a></li>
    </ul>
</div>

<a href="#" id="selected" data-role="button"></a>

jQueryMobile:

$('#selected').hide();

$("#menu li a").on('click',function(){
    $('#selected').html($(this).html()).slideDown().button("refresh");
});

テキストの更新は正常に機能しますが、ボタンの CSS が適切に更新されません。

次のエラーが表示されます。

不明なエラー: 初期化前にボタンのメソッドを呼び出すことはできません。メソッド 'refresh' を呼び出そうとしました

どの初期化について話しているのですか? ページとボタンはすでに初期化されていますね。

編集：

私もこれを試しました：

$(document).on("mobileinit", function() {

    $('#selected').hide();

    $("#menu li a").on('click',function(){
        $('#selected').html($(this).html()).slideDown().button("refresh");
    });

});

エラー メッセージは表示されなくなりました。しかし、テキストの更新はありません:(

4

5 に答える 5

41

この問題は、jquery-ui と bootstrap-button プラグインの競合が原因で発生することがあります。jquery-ui コードは bootstrap.js の前に配置する必要があり、これで問題は解決します。

于 2015-01-11T19:07:33.847 に答える
3

実施例

これが実際の例です: http://jsfiddle.net/Gajotres/BDmex/

HTML :

<div id="menu">
    <ul data-role="listview" data-icon="false">
        <li><a href="#">Value A</a></li>
        <li><a href="#">Value B</a></li>
    </ul>
</div>

<a href="#" id="selected" data-role="button"></a>

JS:

$('#selected').hide();

$("#menu li a").on('click',function(){
    $('#selected').html('<span class="ui-btn-inner"><span class="ui-btn-text">' + $(this).html() + '</span></span>').slideDown();
});
  • ボタンタグ内に data-role="button" がありませんでした
  • ボタンはもともとテキストなしで作成されたため、2 つのスパンを持つ適切な内部構造を追加する必要があります

2 番目の解決策

この問題には別の解決策があり、このARTICLE + 説明と実際の例で見つけることができます。

于 2013-03-24T11:47:12.130 に答える
1

#selectedjQuery Mobile が (DOM インスペクタを使用して) 初期化した後、link 要素の HTML 構造を見てみましょう。ui-btn-text実際のテキストは、クラスを持つスパン要素内にあります。ボタンの HTML を.html()関数で更新すると、jQuery Mobile が作成した HTML 構造が上書きされ、jQuery Mobile が追加した書式が削除されます。

ボタンの子孫である要素を選択して.ui-btn-text、書式設定を削除せずにテキストを更新できます。

これを変える：

$('#selected').html($(this).html()).slideDown().button("refresh");

これに：

$('#selected').find(".ui-btn-text").html($(this).html()).slideDown();

参考までに、初期化されたアンカー タグ ボタンの HTML は次のようになります。

<a href="#" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Anchor</span>
    </span>
</a>

ソース: http://view.jquerymobile.com/1.3.0/docs/widgets/buttons/

于 2013-03-24T17:32:39.600 に答える
0

2つの「」最終htmlを削除して解決したのと同じ問題があったので、htmlの宛先ページの不完全性だと思います

于 2016-10-22T13:30:54.650 に答える
0

私は同じ問題を抱えていましたが、なぜそれが発生するのかを見つけることができませんでした。しかし、初期化後、クラス「ui-btn-text」のスパンがボタン内に配置されることを知っているので、次のように回避します。

var button = $("#selected");
var innerTextSpan = button.find(".ui-btn-text");

// not initialized - just change label
if (innerTextSpan.size() == 0) {
    button.text(label);

// already initialized - find innerTextSpan and change its label    
} else {
    innerTextSpan.text(label);
}
于 2013-09-02T21:17:31.990 に答える