DayPilot调度器自定义模态创建事件重复及args重置问题求助

我来帮你梳理下这个重复创建事件的问题，核心原因其实是事件重复绑定导致的！

你当前的写法是每次用户选中时间范围（触发onTimeRangeSelected）时，都会给.schedule_option按钮重新绑定一次click事件。第一次绑定后点击按钮会触发1次逻辑，第二次选中时间范围又加了一次绑定，点击按钮就会触发2次，以此类推，自然就出现了事件翻倍、三倍的情况。

修复方案 #

我们需要把click事件的绑定逻辑移到onTimeRangeSelected外面，只绑定一次；同时在选中时间范围时，把需要的args数据暂存起来，供点击按钮时使用。

修改后的完整代码示例：

// 页面加载完成后，只给按钮绑定一次点击事件
$(document).ready(function() {
  // 全局变量暂存选中的时间范围数据
  let selectedTimeRange = null;

  $('.schedule_option').click(function(){ 
    // 先判断是否有选中的时间范围，避免无效点击
    if (!selectedTimeRange) return;

    $('#myModal').hide(); 
    dp.clearSelection(); 

    const txt = this.getAttribute("arg"); 
    const colour = this.style.backgroundColor; 

    // 创建DayPilot事件
    const event = new DayPilot.Event({ 
      start: selectedTimeRange.start, 
      end: selectedTimeRange.end, 
      id: DayPilot.guid(), 
      resource: selectedTimeRange.resource, 
      text: txt, 
      backColor: colour 
    }); 

    // 准备提交后端的参数
    const params = { 
      start: selectedTimeRange.start, 
      end: selectedTimeRange.end, 
      text: txt, 
      backColor: colour, 
      id: DayPilot.guid(), 
      resource: selectedTimeRange.resource 
    }; 

    // 提交到后端保存
    DayPilot.Http.ajax({ 
      url: "admin/backend_create.php", 
      method: "POST", 
      data: params, 
      success: function(ajax) { 
        dp.message("success"); 
      }, 
      error: function(ajax) { 
        dp.message("Saving failed"); 
      } 
    }); 

    // 把事件添加到调度器
    dp.events.add(event); 
    // 清空暂存的时间范围，避免重复使用
    selectedTimeRange = null;
  });
});

// 修改onTimeRangeSelected，只负责显示模态框和暂存数据
dp.onTimeRangeSelected = function (args) { 
  selectedTimeRange = args;
  $('#myModal').show(); 
};

为什么这样改能解决问题？ #

• 原来的写法每次选中时间都绑定新的click事件，导致点击按钮时多次触发事件处理逻辑，每次触发都会添加一个事件到调度器，自然出现重复。
• 现在click事件只绑定一次，每次选中时间仅更新暂存的选中数据，点击按钮时使用最新的选中数据创建事件，就不会出现重复触发的情况了。

另外你提到用DayPilot自带模态窗口没问题，是因为官方组件内部已经做好了事件绑定的去重处理，不会出现重复绑定的问题。

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