重新加载部分后，更改时的选择选择器不起作用答案

【问题标题】：selectpicker on change doesn't work after reloading partial重新加载部分后，更改时的选择选择器不起作用
【发布时间】：2019-01-18 02:15:36
【问题描述】：

使用 .net core 2.0 和 razor 页面。

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

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

【问题讨论】：

标签： javascript jquery razor .net-core asp.net-ajax

【解决方案1】：

替换

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

与

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

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

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

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

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

【讨论】：