jquery - Jquery Mobile で ajax を使用してフォームを読み込む

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();

}

あなたを助けるかもしれない他のいくつかのことは

1. フォームに html エラーがあります。フォームの前に div を閉じる必要があります。つまり</div></form>、あるべき姿です。また、要素は aまたは<li>でラップする必要があります。<ul><ol>
2. from 変数の data + を取り除きます。それが何を意図しているのかわかりません。
3. に設定されている div 内にフォームを配置するだけdisplay:noneです。そうすれば、trigger('create') メソッドは不要になります。次に、可視性を show() または toggle() できます。

Answer 2

$(".ui-page").trigger("create");の最後の行として追加しform()ます。