Question

The following jQuery code works as expected (per comments in the code) and essentially what it does is

1. detects which table row is clicked,
2. iterates through the table’s rows and determines if the row has an input in it,
3. if it does, grabs and stores the values of the textboxes and textarea in that row
4. removes the elements from the tds in that row
5. and replaces the inputs with labels with the stored values
6. then, on the clicked row, the values of the labels are stored and
7. the labels are replaced with inputs populated with the stored values

Here’s the relevant jQuery:

// 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" />');
    $(this).find('td.stateCovered').append('<input type="text" id="txtEditState" value="' + state + '" max-length="2" style="width: 22px;" />');
    $(this).find('td.zipsCovered').append('<textarea id="txtEditZips" cols="100">' + zips + '</textarea>');

    // Size the textarea to its contents
    $('#txtEditZips').flexible();
}
return false;
});

As I said, the above functionality works as expected, with the exception that when one of the inputs in the row is clicked, the edit cursor immediately goes away (as if focus is immediately removed from the input). But when I comment out the first block of code (noted in the code), the inputs become editable as expected.

I set up a jsFiddle for this.

Answer 1

A simple solution to this will be adding the following lines to your code. DEMO HERE

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

This issue is happening because of event-bubbling in javascript.
When you click on the input boxes, after performing the click on the input the event will be passed to the parent element.
So we just need to stop event bubbling on all input controls.
event.stopPropagation(); will help you to do that.