Question

目标：一个（jQuery Mobile）弹出窗口，其中包含可以检查的可搜索人员列表。选中时，它们会显示在表格列表中（并在未选中时删除，但我还没有想到那部分）。

当单击复选框时，我已经将它显示在列表中显示的位置 - 但这似乎打破了实际的复选框，因此它不会显示检查。为什么以及如何修复？随意提出一个更好的方法来做这整件事。

HTML：

<a href="#roundAddVol_Pop" data-rel="popup" data-position-to="window" data-role="button" data-transition="pop">Assign Volunteer(s)</a>

<table data-role="table" data-mode="">
    <thead>
        <tr>
            <th>Volunteer(s)</th>
        </tr>
    </thead>
    <tbody id="volunteersList">
        <tr>
            <td>Sample</td>
        </tr>
    </tbody>
</table>
<div data-role="popup" id="roundAddVol_Pop" data-overlay-theme="a" data-theme="a" style="max-width:500px">
    <div data-role="header">
         <h1>Assign Volunteer(s)</h1>

    </div>
    <div data-role="content" data-theme="a">
        <p>Search for names and add a checkmark to each you'd like to assign.</p>
        <br>
        <fieldset>
            <ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search volunteers..." data-inset="true" data-theme="a">
            <li style="padding:0px;">
                <label for="vol1">Joe</label>
                <input name="vol1" id="vol1" type="checkbox">
            </li>
            <li style="padding:0px;">
                <label for="vol2">Betty</label>
                <input name="vol2" id="vol2" type="checkbox">
            </li>
            <li style="padding:0px;">
                <label for="vol3">Tom</label>
                <input name="vol3" id="vol3" type="checkbox">
            </li>
            <li style="padding:0px;">
                <label for="vol4">Susie</label>
                <input name="vol4" id="vol4" type="checkbox">
            </li>
            <li style="padding:0px;">
                <label for="vol5">Frank</label>
                <input name="vol5" id="vol5" type="checkbox">
            </li>
            </ul>
        </fieldset> <a href="#" data-role="button" data-inline="true">Save</a>
 <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow">Cancel</a>

    </div>
</div>

JS：

$(document).ready(function () {
    $('#roundAddVol_Pop input:checkbox').change(

    function () {
        var label = $('label[for="' + this.id + '"]')
        if ($(this).is(':checked')) {
            $('#volunteersList').append('<tr><td>' + label.text() + '</td></tr>').listview('refresh');
        } else {

        }
    });
});

我也很乐意帮助找出取消选中/删除代码并使带有复选框的列表看起来更好，但我认为这些是单独的问题......

Answer 1

工作示例：http://jsfiddle.net/Gajotres/uP9bn/

您不能在不是列表视图的内容上使用 listview（'refresh'）：

$('#volunteersList').append('<tr><td>' + label.text() + '</td></tr>').listview('refresh');

我已将其删除，现在可以正常使用：

$('#volunteersList').append('<tr><td>' + label.text() + '</td></tr>');

在我的其他文章中了解更多资讯： jQuery Mobile: Markup Enhancement of dynamically added content 。

jQuery：复选框被检查时附加的脚本半工作 - 为什么复选框现在没有实际检查？

1 个答案: