如何使用 JQuery Mobile 动态添加代码？

Question

我正在尝试将一些动态生成的代码添加到使用 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;
 });