使用AJAX和PHP将jQueryMobile元素添加到页面后,刷新它们


Refresh jQuery Mobile elements after adding them to the page using AJAX and PHP

我有一个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>

将其添加到页面中效果良好,但jQueryMobile不会更新样式。

如何使其更新样式?

如果使用.show()和.hide(),我不能使用将内容添加到网站并隐藏,因为我需要用户对我需要使用的表的响应。

您可以调用

$("#wrap").trigger('create');

在您的成功回调中。

另请参阅以下问题jQuery Mobile:动态添加内容的标记增强