javascript - 我如何通过使用 javascript 将 jQuery Mobile 样式保留在按钮等上注入(inject)到 HTML 中？

Question

我正在使用 jQuery 移动库尝试创建一个用户可编辑的复选框列表。下面显示了一段 HTML 代码，“fieldset id="nameList"...”是我尝试使用 javascript 函数 addName() 动态注入(inject)复选框的地方；

<div data-role="content">
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                    <input type="submit" onclick="addName()" data-inline="true" data-theme="b" data-icon="plus" data-iconpos="left" value="Add New Name" />
                    <input id="textInput" placeholder="Enter a new name" value="" type="text" />
                </fieldset>
            </div>

            <div data-role="fieldcontain">
                <fieldset id="nameList" data-role="controlgroup" data-type="vertical">
                    <legend>
                        Members
                    </legend>
                    <input name="checkbox1" id="checkbox1" type="checkbox" />
                    <label for="checkbox1">
                        Checkbox1
                    </label>
                </fieldset>
            </div>
            <input type="submit" data-inline="true" data-theme="e" data-icon="delete" data-iconpos="left" value="Delete checked names" />
        </div>

我曾尝试将此函数放在 HTML 文档本身和单独的 .js 文件中，但无论哪种方式都给出相同的结果，如 js 代码下的图片所示。

function addName(){
            $('#nameList').append('<input name="checkbox1" id="checkbox1" type="checkbox" />'+
                                '<label for="checkbox1">'+$('#textInput').val()+'</label><br>');
        }

将 ned 复选框添加到现有的功能复选框列表后的结果只是一个未设置样式的复选框，而不是看起来像我直接用 HTML 编码的复选框，如图所示:http://bildr.no/view/1134640

在我看来，由于某种原因，jquery.mobile-1.0.1.css 根本没有设置使用 javascript 添加的 jQuery Mobile 代码的样式。我之前遇到过其他问题，复选框，不同类型的 jQuery Mobile 按钮在通过 javascript 添加时不会按应有的方式出现。有什么方法可以从 javascript 添加 HTML 代码并仍然获得 jQuery Mobile css 的所有好处？

Answer 1

您必须触发元素或其祖先之一的 create 事件，以便 jQuery Mobile 添加适当的标记和类来设置样式。

function addName(){
    var lastID = $('[name^="checkbox"]').attr('name')
                                        .replace(/^checkbox/,''),
        nextID = parseInt(lastID,10) + 1;
    $('#nameList').append('<input name="checkbox"'
                          + nextID + ' id="checkbox"'
                          + nextID + ' type="checkbox" />'
                          + '<label for="checkbox'
                          + nextID + '">'+$('#textInput').val()
                          + '</label><br>')
                  .trigger('create');
}

请参阅 http://jquerymobile.com/test/docs/pages/page-scripting.html 处的增强新标记部分

FWIW - 您需要修改复选框的 ID，因为 ID 需要是唯一的。