4

これらの2つのjQueryMobileチェックボックスのスタイルは異なりますが、私はそれらを非常によく似た方法で作成していると思います。上部のボックスは動的に追加していますが、下部のボックスはハードコーディングされています。なぜこれがスタイルのこの不一致であるのか誰かが知っていますか？

フィールドセットを保持するDiv

<fieldset id="surveyViewer" data-role="controlgroup">
  </fieldset>

ラジオボタンの追加

$('#surveyViewer').append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1" /><label for="1">1</label><input type="radio" name="options" id="2" value="2" /><label for="2">2</label>');

スタイリングをリフレッシュするためのこの行：

$('#surveyViewer').trigger("create");
$("input[type='radio']").checkboxradio("refresh");

ここに画像の説明を入力してください

4

1 に答える 1

2

上位 2 つを動的にロードしている場合、すべての CSS が適用されているわけではありません。

.trigger("create")コンテンツを追加する要素を追加します。

ここを参照してください:コンテンツを動的に追加した後、jQuery Mobile がスタイルを適用しない

アップデート

ただし、新しいマークアップをクライアント側で生成するか、Ajax を介してコンテンツを読み込んでページに挿入する場合は、create イベントをトリガーして、新しいマークアップに含まれるすべてのプラグインの自動初期化を処理できます。これは任意の要素 (ページ div 自体も含む) でトリガーできるため、各プラグイン (リストビュー ボタン、選択など) を手動で初期化するタスクを節約できます。

たとえば、HTML マークアップのブロック (ログイン フォームなど) が Ajax を介して読み込まれた場合、create イベントをトリガーして、そこに含まれるすべてのウィジェット (この場合は入力とボタン) を拡張バージョンに自動的に変換します。このシナリオのコードは次のようになります。

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

更新 #2

// HTML
<a id="myButton" href="" data-role="button" data-theme="e">Add Radio</a>

<div id="radiodiv1">
<fieldset id="surveyViewer" data-role="controlgroup"></fieldset>
</div>

// JS 
$( "#myButton" ).bind( "click", function(event, ui) {

     $("#surveyViewer").append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1" /><label for="1">1</label><input type="radio" name="options" id="2" value="2" /><label for="2">2</label>');

     $("#radiodiv1").trigger("create");

});

ソリューションを説明するために JSfiddle を作成しました。私はこれをすべてiPadで行いました（どういたしまして）ので、これがうまくいく場合は、少なくとも正解としてマークしてください笑。リンクは次のとおりです（ボタンクリックによるラジオボタンの追加に基づく）

作業例: http://jsfiddle.net/nsX2t/

于 2012-09-09T03:24:18.537 に答える