Kendo Datepicker关闭事件多次触发问题排查

兄弟，你遇到的这个Close事件触发次数逐次递增的问题，我之前帮人排查过好多次，核心原因基本都是事件监听器被重复绑定了！

因为你是在Grid模板里动态生成Datepicker（数组为空时才创建），每次模板重新渲染、或者Datepicker被实例化的时候，你可能都执行了一遍事件绑定的代码——第一次绑定1次，第二次渲染又绑1次，结果就是触发Close事件时，所有绑定的监听都会执行，次数自然越来越多。

先对照下，你的事件绑定是不是类似这种常见的错误写法：

// 每次生成Datepicker都跑这段代码
$('#target-datepicker').on('close', function() {
  // 你的Close事件逻辑
});

如果是这样，那问题就找到了！下面给你几个靠谱的解决办法：

1. 绑定前先解绑旧监听 #

最简单的方式，就是在绑定新的Close事件之前，先把该元素上已有的Close监听移除，避免叠加：

// 先清除旧的，再绑定新的
$('#target-datepicker').off('close').on('close', function() {
  // 你的Close事件逻辑
});

这样每次绑定前都会清空之前的监听，确保只有当前这一次绑定生效，触发时只会执行一次。

2. 用事件委托（更推荐） #

如果你的Datepicker是动态生成的（Grid模板可能反复渲染），最好用事件委托的思路——把监听绑定到静态存在的父容器上，而不是直接绑到动态的Datepicker元素上。这样不管Datepicker被创建多少次，事件只会绑定一次：

// 假设你的Grid有个静态的父容器，比如id是grid-wrapper
$('#grid-wrapper').on('close', '.datepicker-class', function() {
  // 你的Close事件逻辑
});

这种方式利用JS的事件冒泡机制，父容器监听事件，再委托给目标元素，完全不会因为动态元素的创建而重复绑定，一劳永逸。

3. 清理旧的Datepicker实例 #

另外还要检查：当数组元素从空变非空、再变回空时，旧的Datepicker是不是没被销毁，而是又新建了一个？如果页面上存在多个Datepicker实例，每个都绑了Close事件，触发时自然会多次执行。这种情况要在生成新实例前先销毁旧的：

// 先销毁旧实例
$('#target-datepicker').datepicker('destroy');
// 再初始化新的Datepicker
$('#target-datepicker').datepicker();

你先看看自己的代码属于哪种情况，优先试试第一种解绑再绑定的方法，应该能快速解决触发次数递增的问题！

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