使用jQuery事件委托无法定位FullCalendar生成的.fc-bgevent元素怎么办？

我刚梳理了你的问题：给FullCalendar的.fc-bgevent绑定点击事件没触发，但绑定到父元素.fc-widget-content就正常，这大概率是背景事件元素的样式限制导致的，下面给你分析原因和解决办法：

问题根源 #

FullCalendar的背景事件（background event）默认有两个关键样式会影响点击触发：

1. pointer-events: none：多数版本的FullCalendar会给.fc-bgevent设置这个属性，目的是让背景事件不遮挡上层普通事件，但同时也会让它无法响应点击事件。
2. 元素定位/尺寸异常：从你提供的HTML来看，.fc-bgevent的right: -101px可能让元素超出了父容器的可视范围，或者元素未设置高度，导致没有可点击的有效区域。

解决方案 #

方法1：修改样式让背景事件可点击 #

先给.fc-bgevent添加样式，确保它能接收点击事件且在可视范围内：

.fc-bgevent {
  pointer-events: auto !important;
  height: 100% !important;
  right: 0 !important; /* 修正定位，让元素完全处于容器内 */
}

然后再使用你原来的事件委托代码，就能正常触发了：

$("#pricing-calendar").on("click", ".fc-bgevent", function(event){
  console.log($(this).data());
});

方法2：通过父元素事件委托，判断点击目标 #

如果不想修改全局样式，也可以在已经能触发的父元素.fc-widget-content的点击事件里，精准判断点击目标是否属于背景事件：

$("#pricing-calendar").on("click", ".fc-widget-content", function(event){
  const targetBgEvent = $(event.target).closest(".fc-bgevent");
  if(targetBgEvent.length) {
    console.log(targetBgEvent.data());
    // 这里写入你要执行的业务逻辑
  }
});

这种方法利用closest()方法向上查找最近的.fc-bgevent元素，只要点击区域落在背景事件的范围内，就能触发对应逻辑。

额外提示：用FullCalendar官方回调绑定事件 #

更推荐的方式是贴合FullCalendar的设计，在初始化时利用官方提供的回调函数：

$('#pricing-calendar').fullCalendar({
  // 其他配置项...
  dayClick: function(date, jsEvent, view) {
    // 查找当天的背景事件
    const currentBgEvents = $(this).find('.fc-bgevent');
    if(currentBgEvents.length) {
      console.log(currentBgEvents.data());
    }
  },
  // 若使用v5+版本，可通过eventClick直接监听背景事件（需配置允许交互）
  eventClick: function(info) {
    if(info.event._isBackground) {
      console.log(info.event.extendedProps); // 访问事件自定义数据
    }
  }
});

这种方式既能避免样式冲突，又能更贴合FullCalendar的使用逻辑。

内容的提问来源于stack exchange，提问作者Abhilash