jQuery: Script to append when checkbox is checked half working - why is checkbox not actually checking now?

Question

Goal: A (jQuery Mobile) popup with a searchable list of people that can be checked off. When checked they are displayed in a table list (and removed when unchecked, but I haven't figured that part out yet).

I've gotten it working where they show up in the list when the checkbox is clicked - but that seems to have broken the actual checkbox so it doesn't display the check. Why and how do I fix? Feel free to suggest a better way to do this whole thing.

Fiddle: 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 {

        }
    });
});

I'd also love help figuring out the uncheck/remove code and making the list with checkboxes look better, but I figure those are separate questions...

Answer 1

Working example: http://jsfiddle.net/Gajotres/uP9bn/

You can't use listview('refresh') on something that is not a listview:

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

I have removed it and now it works:

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

Find out more in my other article: jQuery Mobile: Markup Enhancement of dynamically added content.