Appended Checkbox Not Recognised

Question

I am using JQuery to append a row containing a checkbox in a table with repeating rows of data (and associated checkboxes). The appended checkbox does not appear to be recognised by JQuery code when it is clicked. The full version of the web page can be seen at harley.net.au/adr/editperson.php?person=1. A cut down version is set out below:

I have tried it in different browsers (Firefox and IE) and on different servers running different versions of IIS and PHP.

The cut down version of the web page:

    <form action="editperson.php" name="frmStaff" method="GET" id="Staff_List_Person" accept-charset="utf-8">
        <table id="Staff_List">
            <tr id="Staff_id_1">
                <td>John Smith</td>
                <td><a href="mailto:john@smith.com>John Smith</a></td>
                <td><input name="DeletePerson[]" type="checkbox" id="DeletePerson" value="1" /></td>
            </tr>
        </table>
</form>

Included in the page is JQuery code as follows:

$('#'+Type+'List tbody').append(data.person);

There is a preceding AJAX call that sets data.person to:

<tr id="Staff_id_3"><td>Joe Bloggs</td><td><a href="mailto:joe@bloggs.com">t</a></td><td><input name="DeletePerson[]" id="DeletePerson" value="3" type="checkbox"></td></tr>

This part works fine. The new row is added to the table and is visible. There is JavaScript code on the page which is designed to delete a row in the table when the checkbox for that row is ticked. A cut down version of the code is as follows:

$('input:checkbox').click(function(){
    if ($(this).attr('id') == 'DeletePerson'){ 
        var rowId = $(this).val();
        ('#Staff_id_'+rowId).hide();
    }
});

This code works fine when deleting an existing row (i.e. a row which appeared on the table when the page was first loaded) but does not work on any row which was added by the JQuery code above. It appears that the click event does not fire when the check box is ticked. The problem appears in both Firefox and IE on two different websites operating different versions of IIS.

Answer 1

First off the id attribute is meant to be unique and if it's not you will experience undefined behavior.

Second this question has been answered many times on this site before. Click event doesn't work on dynamically generated elements

$(document).on('click','input:checkbox',function(){
    if ($(this).attr('id') == 'DeletePerson'){ 
        var rowId = $(this).val();
        ('#Staff_id_'+rowId).hide();
    }
});  

Third I'm pretty sure you could rewrite your event handler to not rely on ids. Like so

$(document).on('click','input:checkbox',function(){
    var $this = $(this);
    if ($this.attr('id') == 'DeletePerson'){ 
        $this.closest('tr').hide();
    }
});