如何使用JQuery Mobile添加代码？

Question

我正在尝试将一些dinamically生成的代码添加到使用Jquery Mobile的现有HTML文件中：

<div data-role="page" id="page">
Click on the button
    <a href="#section" id="abutton" data-role="button">Add item</a>
    <label for="id" id="id-label">ID:</label>
    <input type="text" id="id" name="id" value="" />
    <label for="name" id="name-label">Name:</label>
    <input type="text" id="name" name="name" value="" />
</div>

问题在于，当我添加一些代码时，新代码不会获得与现有代码相同的外观：

 $('#abutton').click(function(){
        var code = '<label for="surname" id="surname-label">Surname:</label>' +
                   '<input type="text" id="surname" name="surname" value="" />';
        $("#page").append(code);
        return false;
 });

我一直在研究，我已经看到非动态生成的HTML代码有一些添加的标签和类。我想我必须调用一些函数来解析新的动态生成的代码，但是哪个？或者我应该做一些完全不同的事情？

Demo here：我添加了一个动态生成的，以显示jquery mobile生成的其他结构，并且只能添加一些类才能解析。

Answer 1

你错过了由jquery mobile首次添加到标签和输入字段的ui类。

但是当你添加新标签和输入字段时，它将不会获得这些类。所以你需要在添加这些字段时添加类。

 $('#abutton').click(function(){
        var code = '<label for="surname" id="surname-label" class="ui-input-text">Surname:</label>' +
        					 '<input type="text" id="surname" name="surname" value="" class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset" />';
        $("#page").append(code);
        return false;
 });