Question

使用.net core 2.0和剃须刀页面。

我有两个Select Picker，它们处于局部状态，并且在页面加载时会加载两个不同的日期范围。

使用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) {...

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

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

最佳实践（和jQuery documentation）要求您使用可能的最小选择器代替$(document)：

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

重新加载部分

1 个答案: