Почему не работает выделение checkbox'a, после того, как повесил событие на клик строки таблицы?

Question

[yeezussniper]

Здравствуйте. Нужна помощь, не могу понять почему в таблице, где первый столбец - это чекбоксы, я повесил на каждое нажатие строки get запрос через ajax, после этого чекбоксы перестали работать, кликается, но не ставится птичка. Убираю ajax get запрос, и все начинает работать.

<table class="table table-sm table-hover allLines" id="tableLines">
            <thead>
              <tr>
                <th scope="col" class="center"><input type="checkbox"></th>
                <th scope="col" class="pp center">№</th>
                <th scope="col">Название</th>
                <th scope="col" class="pp center">Тип</th>
              </tr>
            </thead>
            <tbody id="tableRowsLines"></tbody>
          </table>

/* Выбор определенной линии и загрузка данных по ней */
    $('#tableRowsLines').on('click', 'tr', function () {

        var idLine = $('td:last-child', this).text();

        jQuery.ajax({
            url: "systemComponents/query.php",
            type: "POST",
            data: { idLine: idLine },
            dataType: "json",
            success: function (resultAllHolesInLine) {
                if (resultAllHolesInLine) {
                    jQuery('#tableRowsHoles tr').remove();
                    jQuery('#tableHoles').append(function () {
                        var res = '';

                        for (var i = 0; i < resultAllHolesInLine.allHolesInThisLine2.name.length; i++) {
                            res += '<tr class="line"><td class="center"><input type="checkbox"></td>' + '<td class="center" >' + resultAllHolesInLine.allHolesInThisLine2.pp[i] + '</td>' + '<td class="center" >' + resultAllHolesInLine.allHolesInThisLine2.name[i] + '</td>' + '<td class="center">' + resultAllHolesInLine.allHolesInThisLine2.X[i] + '</td>'
                                + '<td class="center">' + resultAllHolesInLine.allHolesInThisLine2.Y[i] + '</td>' + '<td class="center">' + resultAllHolesInLine.allHolesInThisLine2.Z[i] + '</td>'
                                + '<td class="center">' + resultAllHolesInLine.allHolesInThisLine2.glub[i] + '</td>' + '<td class="center">' + resultAllHolesInLine.allHolesInThisLine2.uzel[i] + '</td>'
                                + '<td class="center">' + resultAllHolesInLine.allHolesInThisLine2.active[i] + '</td></tr>';
                        }

                        return res;
                    });
                    console.log(resultAllHolesInLine);
                }
                else {
                    alert(resultAllHolesInLine.message);
                }
                return false;
            }
        });
        return false;

    });

    /* Выбор определенной линии и загрузка данных по ней */

Answer 1

[yeezussniper]

Проблему решил. Вынес саму функцию в отдельный файл

Answer 2

[Pavel-E-F]

Вы или в примере не всё показали, или в html не всё, что нужно написали.
Вот вижу, к примеру, #tableRowsHoles, а такого id не наблюдаю.
В консоли смотрели?

Comments

[yeezussniper]

<table class="table table-sm table-hover allLines" id="tableHoles">
            <thead>
              <tr>
                <th scope="col" class="center"><input class="all" data-id="d1" type="checkbox"></th>
                <th scope="col" class="center">№</th>
                <th scope="col" class="center">Название</th>
                <th scope="col" class="center">X</th>
                <th scope="col" class="center">Y</th>
                <th scope="col" class="center">Z</th>
                <th scope="col" class="center">Глубина</th>
                <th scope="col" class="center">В узле</th>
                <th scope="col" class="center">Статус</th>
              </tr>
            </thead>
            <tbody id="tableRowsHoles"></tbody>
          </table>

Кликаю в одной таблице, там беру id элемента и отображаю все этой (второй) таблице