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

Question

使用 .net core 2.0 和 razor 页面。

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

更改 Select 之后，它使用 AJAX 重新加载带有新日期的部分。此更改仅生效一次，在重新加载部分内容后，select 选择器不再从其操作中触发任何事件。

<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 documentation）要求您使用尽可能小的选择器而不是$(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.

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

selectpicker on change doesn't work after reloading partial

javascript

jquery

asp.net-ajax

razor

.net-core