Selectpicker on change не работает после частичной перезагрузки

Использование .net core 2.0 и razor pages.

У меня есть два средства выбора, которые являются частичными и загружаются с двумя разными диапазонами дат при загрузке страницы.

После изменения параметра Selects он использует AJAX для перезагрузки этого фрагмента с новыми датами. Это изменение срабатывает один раз, после того, как партиал перезагружен, средства выбора больше не запускают никаких событий из своих действий.

<div id="pvDateRange">
     @Html.Partial("DateRangePartial", Model.Dates)
</div>

Всякий раз, когда диапазон дат изменяется, он вызывает AJAX.

$('#endDate').on('changed.bs.select', function (ev, picker) {
            $("#pvDateRange").load("/Performance/UpdateDateRanges/?accountValue=" + selectedAccount + "&startDate=" + start + "&endDate=" + end, function () {
                $('.selectpicker').selectpicker('refresh');
            });
        });

После запуска этой функции ajax выпадающие списки обновляются с новой моделью. Но теперь он больше не будет вызывать событие on ('change').

Это содержание этого частичного

<div class="container-fluid col-lg-6 col-md-4 col-sm-6 col-xs-12 pull-left">
<div class="container-fluid col-lg-6 col-md-4 col-sm-6 col-xs-12 pull-left">
    Start Date
    <select id="startDate" class="selectpicker" data-style="btn-white" data-live-search="true" data-size="5">
        <option value="@Model.SelectedStartDate">@string.Format("{0:MM/dd/yyyy}", @Model.SelectedStartDate)</option>
        @foreach (var item in Model.StartDates)
        {
            <option value="@item">@string.Format("{0:MM/dd/yyyy}", item)</option>
        }
    </select>
</div>
<div class="container-fluid col-lg-6 col-md-4 col-sm-6 col-xs-12 pull-left">
    End Date
    <div class="btn-group bootstrap-select">
        <select id="endDate" class="selectpicker" data-style="btn-white" data-live-search="true" data-size="5">
            <option value="@Model.SelectedEndDate">@string.Format("{0:MM/dd/yyyy}", @Model.SelectedEndDate)</option>
            @foreach (var item in Model.EndDates)
            {
                <option value="@item">@string.Format("{0:MM/dd/yyyy}", item)</option>
            }
        </select>
    </div>
</div>

1
0
889
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Заменять

$('#endDate').on('changed.bs.select', function (ev, picker) {...

с

$(document).on('changed.bs.select', '#endDate', function (ev, picker) {...

Вместо $(document) вы можете использовать любой другой родительский селектор #endDate, если это родительский не заменяется вашей частичной перезагрузкой.

Если элемент, который вы привязываете, заменяется, привязка исчезает, и ваша функция не выполняется.

Лучшая практика (и документация jQuery) требует, чтобы вы использовали наименьший возможный селектор вместо $(document):

Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents.

Другие вопросы по теме