Testing why row isn't editable when code to replace inputs is active

When the code block indicated in the comments is active, the inputs in that row aren't editable. When the code block is commented out, the inputs become editable.

HTML

<table id="tblBranchCoverage" width="100%" border="1">
    <thead>
        <tr>
            <th width="115px">County</th>
            <th width="30px">State</th>
            <th>Zip Codes</th>
        </tr>
    </thead>
    <tbody>
        <tr class="coverageRow" style="cursor: pointer;">
            <td class="countyCovered">DeKalb</td>
            <td class="stateCovered">IL</td>
            <td class="zipsCovered">60111</td>
        </tr>
        <tr class="coverageRow" style="cursor: pointer;">
            <td class="countyCovered">Du Page</td>
            <td class="stateCovered">IL</td>
            <td class="zipsCovered">60101</td>
        </tr>
    </tbody>
</table>

JavaScript

$('#tblBranchCoverage').on('click', ':input', function (event) {
    event.stopPropagation();
});

// Detect row clicked and switch that row's labels to populated textboxes for editing
$('#tblBranchCoverage').on('click', 'tr', function () {

    // When the following is commented out, the inputs work
    //	If this block of code isn't commented, none of the rows inputs are editable
    // First set any other rows back to labels if they have textboxes
$(this).parent().children('tr').each(function () {
        if ($(this).find('input').length > 0) {
            // Row has textboxes
            var county = $(this).find('#txtEditCounty').val(),
                state = $(this).find('#txtEditState').val(),
                zips = $(this).find('#txtEditZips').val(),
                $td = $(this).find('td');

            // Clear the cells first
            $td.html('');

            // Put the populated labels back in
            $(this).find('.countyCovered').text(county);
            $(this).find('.stateCovered').text(state);
            $(this).find('.zipsCovered').text(zips);
        }
    });

    // Only run this if there aren't already textboxes in the current row
    if ($(this).find('input').length === 0) {
        // Get the values of the cells before the row is cleared
        var county = $(this).find('td.countyCovered').text(),
            state = $(this).find('td.stateCovered').text(),
            zips = $(this).find('td.zipsCovered').text();

        // Clear the text from the selected row
        $(this).find('.countyCovered, .stateCovered, .zipsCovered').text('');

        // Add textboxes to the cells populated with their respective values
        $(this).find('td.countyCovered').append('<input type="text" id="txtEditCounty" value="' + county + '" style="width: 111px;" /><br />' +
            '<input type="submit" id="btnSubmitCoverageEdits" value="Save Edits" /><br />' +
            '<input type="submit" id="btnCancelCoverageEdits" value="Cancel"...