实现点击日历预约槽将data-event-index值存入slotID输入框

开发者阿泽

2026-6-23

解决方案

问题1：切换日期后点击事件失效

动态生成的预约槽元素不会继承初始绑定的事件，改用事件委托，将点击事件绑定到日历的父容器上，通过事件冒泡捕获子元素的点击行为，后续生成的新预约槽也能触发点击事件。

问题2：无法获取data-event-index属性值

点击事件触发时，直接从当前点击的.event-container元素上读取data-event-index属性，可通过element.dataset.eventIndex（更简洁）或element.getAttribute('data-event-index')获取。

修改后的完整代码

const SlotIdSelected = document.getElementById('slotID');

fetch("https://share.ninox.com/mjpp0k6tuvtekgat8bgokas5rcq6i4ew1lre")
  .then(res => res.json())
  .then((data) => {
    const selectedAvailable = $("input[name='available']:checked").val();
    const data_filter = data.filter(element => element.available >= selectedAvailable);
    
    $(document).ready(function() {
      $('#calendar').evoCalendar({
        'format': 'mm/dd/yyyy',
        'theme': 'Royal Navy',
        'language': 'de',
        'firstDayOfWeek': 1,
        'sidebarToggler': true,
        'todayHighlight': true,
        'eventListToggler': true,
        'eventHeaderFormat': 'dd. MM yyyy',
        'calendarEvents': data_filter,
      });

      // 事件委托：绑定到日历容器，捕获所有.event-container的点击
      $('#calendar').on('click', '.event-container', function() {
        // 获取目标元素的data-event-index值
        const eventIndex = this.dataset.eventIndex;
        // 赋值到指定输入框
        SlotIdSelected.value = eventIndex;
      });
    });
  });