Question

我正在尝试使用ajax来显示一个网站表单然而我正在丢失JQM样式，所以它只是显示了如何才能让表单正确显示？我的代码在

之下

 <div data-role="page" data-add-back-btn="true" id="events">
        <div data-role="header">
            <h1 id='heading'></h1>
            <a href="#" data-rel="back" data-icon="arrow-l">Back</a>
        </div>    
    <div data-role="content" id="textcontent"></div>
 <li><a href="Javascript:form();">Contact Us</a></li>

function form()
{ 
alert("Success");
data = data + '<form action="index.html" method="post"><div data-role="fieldcontain"><label for="username">Username<label><input type="text" name="username" id="username"></form></div>'
$('#textcontent').html(data);
$('#textcontent').show();
 }

该功能被调用，表格出现在屏幕上，但它失去了所有的jqm样式，任何帮助将不胜感激

Answer 1

使用trigger('create')应该可以解决问题。

function form(){ 
    data = '<form action="index.html" method="post"><div data-role="fieldcontain"><label      for="username">Username<label><input type="text" name="username" id="username"></div></form>';
    $('#textcontent').html(data);
    $('.ui-page').trigger('create');
    $('#textcontent').show();

}

可能对你有帮助的其他一些事情

表单中有html错误。你的div必须在你的表格之前关闭。即</div></form>应该如何。另外，<li>元素应包含在<ul>或<ol>中。
从变量中删除数据+。我不确定那是为了什么。
只需将表单放在设置为display:none的div中。这样，触发器（'create'）方法将是不必要的。然后你可以只显示（）或切换（）可见性。

Answer 2

将$(".ui-page").trigger("create");添加为form()中的最后一行。

在Jquery Mobile中使用ajax加载表单

2 个答案: