データベース内のアイテムごとに 3 つのフォーム要素をレンダリングする PHP スクリプトがあります。たとえば、その出力は次のようになります。
<!-- Entry 1 -->
<div data-role="fieldcontain">
<label for="1-name"></label>
<input type="text" name="1-note" id="1-note" data-mini="true" />
</div>
<div data-role="fieldcontain">
<label for="1-age"></label>
<input type="text" name="1-note" id="1-note" data-mini="true" />
</div>
<div data-role="fieldcontain">
<label for="1-description"></label>
<input type="text" name="1-note" id="1-note" data-mini="true" />
</div>
...
<!-- Entry n -->
<div data-role="fieldcontain">
<label for="n-name"></label>
<input type="text" name="n-note" id="n-note" data-mini="true" />
</div>
<div data-role="fieldcontain">
<label for="n-age"></label>
<input type="text" name="n-note" id="n-note" data-mini="true" />
</div>
<div data-role="fieldcontain">
<label for="n-description"></label>
<input type="text" name="n-note" id="n-note" data-mini="true" />
</div>
次に、メイン ページで、Ajax を使用して、php で生成されたコンテンツをページに追加します...
$(document).on('pageshow', function(){
$("#menu1").bind("change", function() {
$.ajax({
type: "GET",
url: "includes/ajax_get_entries.php",
data: "table="+$("#menu1").val(),
success: function(html) {
$("#wrap").html(html).selectmenu('refresh', true);
}
});
});
});
... PHP コンテンツをラッパーの間に入れることにより:
<div data-role="fieldcontain" id="wrap"></div>
ページへの追加は正常に機能しますが、jQuery Mobile はスタイルを更新しません。
スタイルを更新するにはどうすればよいですか?
.show() と .hide() を使用している場合、コンテンツをサイトに追加して非表示にすることはできません。使用する必要があるテーブルでユーザーからの応答が必要なためです。