web-dev-qa-db-ja.com

初期化前にメソッドを呼び出すことはできません。メソッド 'refresh'を呼び出そうとしました

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

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");
    });

});

エラーメッセージはもうありません。しかし、テキストの更新はありません:(

jqueryhtml5css3jquery-mobilebutton
17
Yako

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

39
Mwirabua Tim

実施例

これが実際の例です： 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つのスパンを持つ適切な内部構造を追加する必要があります

第二の解決策

この問題には別の解決策があり、これは[〜＃〜] article [〜＃〜]+説明と動作例。

3
Gajotres

JQuery Mobileが（DOMインスペクターを使用して）初期化した後、_#selected_リンク要素のHTML構造を見てください。実際のテキストは、_ui-btn-text_クラスを持つspan要素内にあります。したがって、ボタンの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/

1
Jasper

私は同じ問題を抱えていて、なぜそれが起こるのかを見つけることができませんでした。しかし、初期化の後、クラス「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);
}
0
Plamen

2つの ""最終的なhtmlを削除することで解決したのと同じ問題があったので、それはhtml宛先ページの欠陥だと思います

0
semion zloi