При вставке строки таблицы HTML с использованием jQuery некоторые элементы ввода не работают

Question

Я вставляю строку таблицы после текущей строки, нажимая на кнопку. Строка вставляется по мере необходимости; однако поля ввода после первого и кнопка в конце строки не работают. Поля ввода не могут быть нажаты для добавления данных; Тем не менее, я могу вкладывать в них, чтобы добавить данные. Кнопка в конце строки не регистрирует щелчок. Вы можете перейти к кнопке и нажать Enter, и она работает (вкладка к ней, а нажатие - нет).

Существующая строка:

//Add an initial row if there are not currently any program lines
var newRows = "";
    newRows += "<tr><td class='button'><button type='button' name='addPDRow'><span class='glyphicon glyphicon-plus'></span></button></td>";
    newRows += "<td class='keyvalue'><input class='timeWidth pdValue' name='row0' value='07:00'></input></td>"; //Time
    newRows += "<td class='keyvalue'><input class='activityWidth  pdValue' name='row0'></input>" //Activity
    //Activity table
    newRows +=      "<table name ='activityTable'>";
    newRows +=          "<tbody name='activity2Tablebody'>";
    newRows +=              "<tr>";
    newRows +=                  "<td class='dropValue'>";
                                    //Put a transparent div over the inputs elements so it can be dragged to remove
    newRows +=                      "<div class='dragabbleRemove'><div>&nbsp;</div>";
    newRows +=                          "<input type='text' class='droppableItem activityWidth' disabled></input>";//Droppable Activity Class
    newRows +=                      "</div>";
    newRows +=                  "</td>";
    newRows +=              "</tr>";
    newRows +=          "</tbody>";
    newRows +=      "</table>";
    newRows +="</td>";

    newRows += "<td class='keyvalue'><input class='pdValue' name='row0'></input></td>";//Location
    newRows += "<td class='keyvalue'><input class='pdValue' name='row0'></input></td>";//Equip. Needed
    newRows += "<td class='keyvalue'><input class='pdValue' name='row0'></input></td>";//Youth to Bring
    newRows += "<td class='keyvalue'><input class='pdValue' name='row0'></input></td>";//Leaders
    newRows += "<td class='button'><button type='button' name='removePDRow'><span class='glyphicon glyphicon-minus'></span></button></td></tr>";

$('#programDetailTablebody').append(newRows);

Функция добавления новой строки: :

$('#programDetailTablebody').on('click', 'button[name="addPDRow"]', function(e) {
    e.preventDefault();
    var newRows = "";
        newRows += "<tr><td class='button'><button type='button' name='addPDRow'><span class='glyphicon glyphicon-plus'></span></button></td>";
        newRows += "<td class='keyvalue'><input class='timeWidth pdValue' name='row' value='07:00'></input></td>"; //Time
        newRows += "<td class='keyvalue'><input class='activityWidth  pdValue' name='row' value='activity'></input></td>"; //Activity       
        newRows += "<td class='keyvalue'><input class='pdValue' name='row' value=''></input></td>";//Location
        newRows += "<td class='keyvalue'><input class='pdValue' name='row'></input></td>";//Equip. Needed
        newRows += "<td class='keyvalue'><input class='pdValue' name='row'></input></td>";//Youth to Bring
        newRows += "<td class='keyvalue'><input class='pdValue' name='row'></input></td>";//Leaders
        newRows += "<td class='button'><button type='button' name='removePDRow'><span class='glyphicon glyphicon-minus'></span></button></td></tr>";

    $(newRows).insertAfter($(this).closest('tr'));

    $(makeDroppable);
});

Вот так выглядит новая добавленная строка:

Answer 1

Кто-то упомянул мне "если другой слой не наложен на него, фиксируя щелчки мыши". Brilliant! У меня есть следующее css:

.dragabbleRemove div {
    position:absolute;
    z-index:2;
    height: 100%;
    width: 100%;
}

Какие пары с:

//Put a transparent div over the inputs elements so it can be dragged to remove
newRows +=                      "<div class='dragabbleRemove'><div>&nbsp;</div>";
newRows +=                          "<input type='text' class='droppableItem activityWidth' disabled></input>";//Droppable Activity Class
newRows +=                      "</div>";

Так что решение больше css:

    .pdValue {
        position: relative;
        z-index:3;
    }

    .buttonFront {
        position: relative;
        z-index:3;
    }

Что я Не могу понять, почему оверлейная программа достигает одного ряда вправо?

С уважением,

Глин