Question

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

<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文档itselt中，并放在一个单独的.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必须是唯一的。

Answer 2

添加动态复选框后，调用

$("input[type=checkbox]").checkboxradio();

编辑：删除'refresh'作为checkboxradio的参数。也许这将有助于其他人。

Answer 3

jQuery Mobile将样式应用于JavaScript，因此必须解析动态添加的内容以添加样式。 jQuery Mobile提供函数.page()以将样式应用于新创建的内容

因此，在添加之后，您可以使用：

$('input').page();

或者使用类似newclass的类和那些新添加的元素，因此每次添加一个元素时jQuery都不必解析所有输入

更多信息：http://jquerymobiledictionary.pl/faq.html

Answer 4

如果你要添加像这样的复选框

enter code here
   @foreach (var selectListItem in Mobile.GetLookupAsSelectList(Shared.TableConstants.FiledName))
            {

             <input type="checkbox" name="checkbox-@selectListItem.Value" class="fillter" id="@selectListItem.Value" value="@selectListItem.Value"/>
                  <label for="@selectListItem.Value">
                   @selectListItem.Text</label>
            }

确保您的输入

如何通过使用javascript在HTML中注入的按钮等保持jQuery Mobile样式？

4 个答案: