0

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

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

小提琴：http: //jsfiddle.net/2sRAc/

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 {

        }
    });
});

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

4

1 回答 1

2

工作示例：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：动态添加内容的标记增强。

于 2013-05-09T15:16:57.093 回答