Mulitple Daterangepickers在单个页面上不起作用

Question

我正在使用daterangepicker库对页面进行一些过滤。我现在的问题是，如果我在页面中添加了另一个也使用daterangepicker的视图，则当前页面上的daterangepickers将停止工作，而转向其他视图。

主视图：

$('#chart-date-range-picker').on('apply.daterangepicker cancel.daterangepicker', function () {
    alert('apply clicked!');
    drawBatteryLifeChart($('#pills-battery-life canvas')[0]);
});

JS：

<div class="form-group m-0">
    @Html.TextBox("DateRangePicker", string.Empty, new {
        @id = "recent-activity-audit-chart-date-range-picker",
        @class = "date-range-picker form-control dashboard",
        placeholder = "Date_Range",
    })
</div>

共享视图：

$('#recent-activity-audit-chart-date-range-picker').on('apply.daterangepicker cancel.daterangepicker', function () {
    activityAuditDelay(function () { activityAuditTable.draw(); }, 0);
});

共享视图JS：

if

同样，如果我不将共享视图包括在我当前正在使用的视图中，则可以很好地工作，但是只有在共享视图中，daterangepickers才能正常工作。这两个JS文件都在Document.ready上运行，非常感谢您的帮助！

谢谢。