Проблема с таблицей событий JS в списке и установите флажок

Question

У меня есть следующий код, на практике у меня есть две проблемы, во-первых, когда я конвертирую из таблицы в список событий в jquery больше не работает. Вторая проблема заключается в том, что я не могу выполнить .trigger ('click'); на флажок, если я нажму на его родственника там.

не могли бы вы мне помочь?

HTML НАЧАТЬ С ТАБЛИЦЫ

....

<table id="table-files" class="uk-table uk-table-responsive uk-table-middle">
    <thead>
        <tr>
            <th class="uk-table-shrink"><input name="checkbox-all-files" type="checkbox" class="uk-checkbox"></th>
            <th id="table-image" class="uk-table-shrink"></th>
            <th id="table-name" class="uk-table-expand">Name</th>
            <th id="table-file" class="uk-table-shrink">File</th>
            <th id="table-folder" class="uk-table-shrink">Folder</th>
            <th id="table-tools">Date</th>
        </tr>
    </thead>
    <tbody>
        <tr class="check-files" data-user="2" data-file="10">
            <td><input name="checkbox-files" value="43" type="checkbox" class="uk-checkbox"></td>
            <td data-image="1"><img alt="User" src="/user/user_profile.jpg" width="60" height="60"></td>
            <td class="uk-text-nowrap">Mark Zu</td>
            <td class="uk-text-nowrap" name="tools-table"><a href="/files/Test.jpg">Test.jpg</a></td>
            <td class="uk-text-nowrap">Main</td>
            <td name="tools-table"></td>
        </tr>
    </tbody>
</table>

....

<script src="/functions/table-to-ul.js" type="text/javascript"></script>
<script src="/functions/files.js" type="text/javascript"></script>
<script src="/functions/filesList.js" type="text/javascript"></script>

ФУНКЦИОНАЛЬНАЯ КОНВЕРСИЯ НА ФАЙЛЕ TABLE-to-UL. JS

function convert_table_to_list_files(table_id) {
    var list_id = table_id.replace("table-", "ul-");
    var ul = $("<ul id='"+list_id+"' class='uk-grid uk-grid-medium uk-child-width-1-2@s uk-child-width-1-3@l uk-child-width-1-4@xl' uk-grid uk-height-match='target: > div > .uk-card'>");
    $("#"+table_id+" tbody tr").each(function(){
        var classTR = this.className;
        var userTR = this.attributes["data-user"].value;
        var fileTR = this.attributes["data-file"].value;

        var li = $("<li class='"+classTR+"' data-user='"+userTR+"' data-file='"+fileTR+"'>");

        var checkboxCell = this.children[0].innerHTML;
        var ImgCell = this.children[1].attributes["data-image"].value;
        var userCell = this.children[2].innerHTML;
        var fileCell = this.children[3].innerHTML;
        var fileHrefCell = this.children[3].firstElementChild.firstElementChild.href;

        var resultOutput = `<div class="uk-card uk-card-box">
            <div class="uk-card-teaser uk-position-relative">
                <div class="uk-background-cover" style="background-image: url('`+fileHrefCell+`');">
                </div> 
            <canvas width="1200" height="800"></canvas> 
            </div>
            <div class="uk-text-truncate"><div class="uk-flex uk-flex-center uk-flex-middle">`+
                checkboxCell+`<span>`+fileCell+`</span>`+
                `</div><hr>`+
                `<div data-image="`+ImgCell+`">`+userCell+`</div>`
            +`</div>
        </div>`;

        li.append(output);
        ul.append(li);
    })
    $("table#"+table_id).replaceWith(ul);
}

НАЧАЛО ФУНКЦИИ, КОГДА НАЖМИТЕ КНОПКУ В ФАЙЛАХ. JS НАЖМИТЕ КНОПКУ СОБЫТИЙ:

 $(function() {

    $('a[id=system-change-table]').click(function(){
        convert_table_to_list_files("table-files");
    });

});

В ФАЙЛАХ ФАЙЛОВ. JS НАХОДИТСЯ НЕКОТОРЫЕ ФУНКЦИОНАЛЬНЫЕ МЕРОПРИЯТИЯ:

$(function() {
    $('#table-files tbody').on("click", "tr", function(event) {
        var td_id = $(event.target).closest('td').attr('name');
        if((event.target.type == 'checkbox') || (td_id == 'tools-table')){
        }else{
            var checkbox = $(':checkbox', this).trigger('click');
            if($(checkbox).is(":checked")){
                $(this).closest('tr').addClass("uk-active");
            }else{
                $(this).closest('tr').removeClass("uk-active");
            } 
        }
    });

    $('#ul-files').on("click", "li", function(event) {
        var checkbox_type = $(event.target).find("input[type=checkbox]").attr('name');
        if(checkbox_type){
            var checkbox = $(':checkbox', this).trigger('click');
            if($(checkbox).is(":checked")){
                $(this).closest('li').addClass("uk-active");
            }else{
                $(this).closest('li').removeClass("uk-active");
            }
        }
    });

  ....
});

Теперь, как я уже сказал, если я не запускаю преобразование, функция щелчка в таблице tr работает, а функция щелчка - нет. Если я начинаю преобразование, функция перестает работать. Также в конвертации, если у меня установлен флажок, он не преобразуется в проверенный, даже если в атрибуте он показывает мне значение true. Спасибо всем

Первая проблема решается, когда я изменяю это

$ ('# table-files tbody'). On ("click", "tr", function (event) {

до

$ (document.body) .on ('click', '# table-files tbody tr', function () {

работа.

Теперь проблема в том, что статус проверен, не копировать в html и не проверять флажок ввода в списке