如何在Bootstrap Datepicker中点击单元格并将事件附加到它

How to get clicked cell and attach an event to it in Bootstrap Datepicker?

本文关键字：事件 单元格 Bootstrap Datepicker      更新时间：2023-09-26

当用户在Bootstrap Datepicker中单击时，我想获得day单元格的DOM或jQuery元素。我的用例是在日期上显示一个popover，显示额外的信息。

Datepicker有getDate()方法，但它只返回选定日期的字符串表示，而不返回单击的DOM元素。

我尝试将.on("click")事件侦听器附加到.day类，每个表日单元格都使用该类进行标记。我还有一个绑定到Datepicker本身的.on("changeDate")事件侦听器。然而，我在这种方法上遇到了一些麻烦。

当我尝试在一天中单击时，每次都会触发侦听changeDate的函数，但分配给click的函数只在第一次单击时触发一次。这是一个展示这种行为的Fiddle。有什么想法吗？

我明白了，感谢@Ravneet的提示。

$('#datepicker').on('changeDate')导致Datepicker被重新组装，这将从表单元格中删除任何现有的事件侦听器。

因此，您需要在.on('changeDate')调用后重新连接click事件侦听器：

function onChangeDate(e){
    alert('onChangeDate');
    // Must re-assign event listeners after calling ".on('changeDate')"
    $('.day').on('click', onDayClick);
}
function onDayClick(e){
    alert('onDayClick');
}
$('#datepicker').datepicker({
  weekStart: 1,
  maxViewMode: 'years',
  format: 'yyyy/mm/dd',
});
$('#datepicker').on('changeDate', onChangeDate);
$('.day').on('click', onDayClick);
相关文章：