更改时选择选取器在重新加载部分后不起作用

Question

使用 .net core 2.0 和 razor pages。

我有两个选择选择器，它们处于部分状态，并且在页面加载时加载了两个不同的日期范围。

更改后 选择它 使用 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>

Answer 1

替换

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

跟

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

您可以使用任何其他父选择器#endDate代替$(document)，只要它是不会被部分重新加载替换的父选择器。

如果您绑定的元素被替换，则绑定将消失，并且不会执行您的函数。

最佳实践(和jQuery文档(要求您使用尽可能小的选择器而不是$(document)：

在文档树顶部附近附加许多委托事件处理程序可能会降低性能。每次事件发生时，jQuery 都必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为了获得最佳性能，请将委派事件附加到尽可能靠近目标元素的文档位置。避免对大型文档上的委派事件过度使用document或document.body。