1

ページの読み込み時に自動的に行われるように、jQuery MobileにJavaScriptで生成されたリンクをボタンウィジェットとしてレンダリングさせる方法はありますか？

リンクを動的に作成するために、次のようなJavaScriptを使用しています。

var ws=document.getElementById('workspace'); // empty <div id="workspace"></div>
ws.innerHTML='<a id="myb" href="foo.php" data-role="button">baz</a>';

<a id="myb" href="foo.php" data-role="button">baz</a>そしてもちろん、ボタンではなく通常のリンクのみを生成するので、私の質問は、同じものが最初からページに表示された場合と同じように、jQueryMobileにボタンを動的に作成させる方法です。

編集 ：

このようなスクリプト：

$('#tagspace').html('<a id="myb" data-inline="true" data-ajax="false"
                    href="boo.php" data-role="button">baz</a>')
              .button()
              .click(function() { window.location.href=this.href;});

改善です。それはボタン（全ページ幅）をもたらし、それはラベルのテキストの外側のクリックに敏感です。ただし、this目的のリンク「destination」を含む要素にマップされていないようです。

これのDOM結果：

<div aria-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-fullsize
                                      ui-btn-block ui-btn-up-c" data-mini="false" data-inline="false" data-theme="c" data-iconpos="" data-icon="" data-wrapperels="span" data-iconshadow="true" data-shadow="true" data-corners="true"> <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">baz</span>
</span>
    <div aria-disabled="false" class="ui-btn-hidden" id="tagspace"> <a id="myb" data-inline="true" data-ajax="false" href="boo.php" data-role="button">baz</a>

    </div>
</div>

だから、それはまだ同じ種類のボタンではありません。

4

1 に答える 1

1

ボタン ウィジェットを作成するには、要素を jQuery オブジェクトでラップし、button()メソッドを呼び出します。

$("#workspace").html("<a id='myb' href='foo.php' data-role='button'>baz</a>")
               .button();

更新:ボタン ウィジェットは、リンクの既定の動作を妨げるため、clickその動作を元に戻したい場合は、ハンドラーを追加する必要があります。

$("#workspace").html("<a id='myb' href='foo.php' data-role='button'>baz</a>")
               .button()
               .click(function() {
                   window.location.href = this.href;
               });
于 2012-08-16T08:33:58.613 に答える