jQuery создает таблицу программно не работает должным образом, как ожидалось в частичном представлении моего проекта MVC asp.net

Question

Я работаю над приведенным ниже кодом jQuery + MVC.Я использую jQuery для генерации выпадающего меню, привязки события клика для моего меню и динамического создания таблицы.Моя таблица содержит матрицу фотографий, и в настоящее время она использует фиктивные фотографии.контейнерный контейнер моего меню, расположенный в моем _LoginLayout.cshtml, в то время как я помещаю свою таблицу в частичное представление, я использую jQuery для привязки события click и обрабатывается с помощью вызова ajax для загрузки частичной страницы.

Моя проблема в том, что при первом щелчке по меню отображается неполная страница, но тело таблицы не может быть сгенерировано надлежащим образом, но после первого щелчка эта проблема больше не появляется, даже после обновления моей страницы., по-прежнему работает правильно, это происходит только один раз после того, как я снова запустил проект в VS.Я пытался отладить JQuery несколько раз, я обнаружил, что мой tbody содержит правильное значение.Так в чем причина и как ее решить?Это проблема жизненного цикла?первый снимок экрана показывает, что при первом щелчке по нему он не работает должным образом , второй снимок экрана показывает после первого щелчка, он работает правильно.

Ниже приведен мой код jQuery:

$(function () {
        var folders = ['Annual Day Celebrations 2018-2019', 'Sports Day 2018-2019', 'Sankranthi 2018-2019', 'Cultural Fest 2018-2019', 'Summer 2019-2020', 'Winter 2019-2020'];
        var start = 0;
        var length = 3;
        var folders_current = folders.slice(start, start + length);
        var cList = $('#items');
        $.each(folders_current, function (i) {
            var aaa = $('<div />')
                .addClass('panel-body')
                .css('text-align', 'center')
                .text(folders[i])
                .appendTo(cList);
        });
        $('#moveup').click(function () {
            if (start > 0) {
                start--;
                var folders_current = folders.slice(start, start + length);
                cList.empty();
                $.each(folders_current, function (i) {
                    var aaa = $('<div />')
                        .addClass('panel-body')
                        .css('text-align', 'center')
                        .text(folders_current[i])
                        .appendTo(cList);
                });
            }
        });
        $('#movedown').click(function () {
            if (start < folders.length - 1 - length) {
                start++;
                var folders_current = folders.slice(start, start + length);
                cList.empty();
                $.each(folders_current, function (i) {
                    var aaa = $('<div />')
                        .addClass('panel-body')
                        .css('text-align', 'center')
                        .text(folders_current[i])
                        .appendTo(cList);
                });
            }
        });
        $("#items").on("click", ".panel-body", (function () {
            debugger;
            console.log(this.textContent);
            if (this.textContent !== null) {
                displayGallery(this.textContent);
             }
        }));
    });

    function displayGallery(folder) {
        $("#partialView").load("/gallery/getview",
            { folder: folder });
        console.log("displayGallery function " + folder);
        setTimeout(function () {
            var tbl_body = "";
            var odd_even = false;
            var image_addr = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVKKlH1KzCm5Ck54kjJvLr2m5D9llnh0M3SUzwqogjrLfx44oM";
            data = [
                { 'mypic1': image_addr, 'mypic2': image_addr, 'mypic3': image_addr, 'mypic4': image_addr, 'mypic5': image_addr },
                { 'mypic1': image_addr, 'mypic2': image_addr, 'mypic3': image_addr, 'mypic4': image_addr, 'mypic5': image_addr },
                { 'mypic1': image_addr, 'mypic2': image_addr, 'mypic3': image_addr, 'mypic4': image_addr, 'mypic5': image_addr },
                { 'mypic1': image_addr, 'mypic2': image_addr, 'mypic3': image_addr, 'mypic4': image_addr, 'mypic5': image_addr }
            ];
            $.each(data, function () {
                var tbl_row = "";
                $.each(this, function (k, v) {
                    tbl_row += "<td class=" + "mytd" + " colspan='1'>" + "<div>" + "<img class=" + "'myimg'" + " src=" + v + ">" + "<br/>" + "<p style=" + "text-align:center;" + ">" + k + "</p>" + "</div>" + "</td>";
                })
                //tbl_body += "<tr class=\""+( odd_even ? "odd" : "even")+"\">"+tbl_row+"</tr>";
                tbl_body += "<tr>" + tbl_row + "</tr>";
                //odd_even = !odd_even;
            });
            console.log(tbl_body);
            $("#mytbody").append(tbl_body);
            console.log("mytbody");
        }, 200);
    }

Ниже приведен мой частичный вид, тело таблицы будет динамически генерироваться из кода jQuery:

<div>
    <table id="mytable">
        <thead>
            <tr>
                <th width="20%"></th>
                <th width="20%"></th>
                <th width="20%"></th>
                <th width="20%"></th>
                <th width="20%"></th>
            </tr>
        </thead>
        <tbody id="mytbody" style="background-color:gray; display:block; overflow-y:auto; overflow-x:hidden; height:650px;">
            <tr>
                <td colspan="4" style="text-align:left"> <h4>Annual Day Celebrations 2018-2019</h4></td>
                <td colspan="1" style="text-align:center"><h1>...</h1></td>
            </tr>
            <tr>
                <td colspan="5"><hr /></td>
            </tr>
        </tbody>
    </table>
</div>

Ниже приведен сегмент кода моего меню, в котором я вставляю свой div с идентификатором PartalView.

<div class="panel-group" style="width:15vw; float:left">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <div data-toggle="collapse" href="#collapse1">
                        <img class="photocamera" src="~/css/Images/photo_camera.png" style="width:13vw; height:13vw" />
                    </div>
                </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <div id="moveup" align="center">
                    <img class="arrow" src="~/css/Images/up_angle.png" />
                </div>
                <div id="items">

                </div>
                <div id="movedown" align="center">
                    <img class="arrow" src="~/css/Images/down_angle.png" />
                </div>
            </div>
        </div>
    </div>
    <div id="partialView" style="float: right;width: 85vw;z-index: 10;position: absolute;margin-left: 15vw;}"></div>
<script src="~/js/Gallery.js"></script>