jQuery: скрипт для добавления, когда флажок установлен наполовину работает - почему флажок фактически не проверяется сейчас?

Question

Цель: всплывающее окно (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 {

        }
    });
});

Я также хотел бы помочь выяснить код снятия / удаления и сделать список с флажками выглядеть лучше, но я думаю, что это отдельные вопросы...

Answer 1

Рабочий пример: http://jsfiddle.net/Gajotres/uP9bn/

Вы не можете использовать listview('refresh') для чего-то, что не является listview:

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

Я удалил его, и теперь он работает:

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

Узнайте больше в моей другой статье: jQuery Mobile: разметка Улучшение динамически добавляемого контента.