Question

我有一个呈现部分视图（_PartialList）的视图页面（索引）。在列表中，我正在显示一个带有“操作按钮”羽毛图标的表格。我从这里得到了图标：

首次加载时一切正常-图标已显示，但是当我单击“索引”页面的任何控件（例如'ddlSelect'）时，都会触发一些筛选表的jquery代码（ajax局部视图加载）图标消失了？

这是我在“布局”页面的正文中添加羽毛图标的方式：

<script src="~/js/feather.min.js"></script>
    <script>
        feather.replace()
    </script>

我的索引摘录：

<div class="col-md-8 col-sm-12">
        <div class="card" id="listHeader">
            <div class="card-header">
                <h5 class="card-title">Seznam kontaktov</h5>
                <div class="row">
                    <div class="col-12 form-inline">
                        <select id="ddlSelect" asp-items="Model.Stranke" class="form-control filter"></select>

                        <input type="text" name="SearchString" placeholder="Išči" value="@ViewData["CurrentFilter"]" id="tbSearch" class="form-control filter" />

                        <input value="Išči" type="button" id="btnSearch" class="btn btn-primary ml-2" onclick="filterData(this);" />

                        <div class="text-right">
                            <a asp-controller="Kontakti" asp-action="Add" class="btn btn-primary" role="button">Dodaj</a>
                        </div>

                    </div>
                </div>
            </div>

            <div id="sectionList">
                @{await Html.RenderPartialAsync("_PartialList", Model);}
            </div>
        </div>
    </div>

<script>

        // drop down filter
        $(document).ready(function () {

            $('#mainContent').on("change click keyup", ".filter", function () {

                // drop down
                var strSelected = "";
                $('#ddlSelect option:selected').each(function () {
                    strSelected += $('#ddlSelect')[0].value;
                });

                // search text
                var search = $('#tbSearch').val();

                // url - basic
                var url = '/Kontakti/IndexPartial?idSelect=' + strSelected;
                url += '&searchString=' + search;

                // partial reload
                $('#sectionList').load(url);

            });
        });

</script>

以及带有PartialView中带有羽毛图标的表格（最后一个）：

<table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Id</th>
                <th>Kontakt</th>
                <th>Stranka</th>
                <th>Mobitel</th>
                <th>E-pošta</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var kontakt in Model.Kontakti)
            {
                <tr data-url="@Url.Action("Preview", "Kontakti", new { id = @kontakt.IdKontakt })">

                    <td>
                        @kontakt.IdKontakt
                    </td>
                    <td>
                        @kontakt.Ime @kontakt.Priimek
                    </td>

                    <td>
                        @kontakt.Stranka.SkrajsanNaziv
                    </td>
                    <td>
                        @kontakt.Mobitel
                    </td>
                    <td>
                        @kontakt.Email
                    </td>
                    <td>
                        <a href="#" data-toggle="tooltip" title="Predogled" class="preview"
                           data-url="@Url.Action("Preview", "Kontakti", new { id = @kontakt.IdKontakt })">
                            test
                        </a>

                        <a href="#" data-toggle="tooltip" title="Predogled" class="preview"
                           data-url="@Url.Action("Preview", "Kontakti", new { id = @kontakt.IdKontakt })">
                            <i class="align-middle" data-feather="search"></i>
                        </a>

                        <a href="#" data-toggle="tooltip" title="Uredi" class="edit"
                           data-url="@Url.Action("Edit", "Kontakti", new { id = @kontakt.IdKontakt })">
                            <i class="align-middle" data-feather="edit"></i>
                        </a>

                        <a href="#" data-toggle="tooltip" title="Izbriši"
                           data-url="@Url.Action("Delete", "Kontakti", new { id = @kontakt.IdKontakt })" onclick="showGenericModal();">
                            <i class="align-middle" data-feather="trash-2"></i>
                        </a>
                    </td>
                </tr>
            }
        </tbody>
    </table>

为什么在触发jquery后图标不显示？

编辑：我还在布局中使用Bootstrap 4。

jQuery触发后，Asp.Net Core MVC数据羽毛图标丢失

0 个答案: