У меня есть страница просмотра (индекс), которая отображает частичное представление (_PartialList). В списке я показываю таблицу с перьями значков для «кнопок действий». Я получил значки отсюда:
https://github.com/feathericons/feather
При первой загрузке все в порядке - значки отображаются, но когда я щелкаю по любому из элементов управления на моей странице индекса (например, «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 в макете.