关于jQuery中链式调用off与on方法的可行性咨询

嘿，这个问题我之前做滑块组件开发时也碰到过！咱们来好好捋一捋你遇到的Cannot read property 'on' of undefined错误到底是怎么回事，以及怎么解决。

错误原因分析 #

你写的链式调用代码slider.off('change').on('change', ...)，理论上原生jQuery的off()方法是会返回调用它的jQuery对象的，所以链式调用on()是完全可行的。但你出现这个错误，大概率是下面两种情况之一：

• slider本身不是有效的jQuery对象：比如你获取元素的方式有问题（选择器写错、DOM还没加载完成就执行代码），导致slider是undefined或者空的jQuery集合。
• 你用的滑块插件重写了off方法：很多第三方滑块插件（比如ionRangeSlider这类）会给jQuery对象添加自定义的off方法，而这些自定义方法可能没遵循jQuery的链式规则，调用后返回undefined而非原jQuery对象，这时候再链式调用on()自然就会报错。

解决方案 #

根据上面的分析，你可以试试下面几种办法：

1. 先确认slider是合法的jQuery对象

先加一行调试代码，看看slider的实际情况：

console.log(slider);

如果输出undefined，说明获取元素的逻辑有问题，比如把代码放在$(document).ready()里确保DOM加载完成：

$(document).ready(function() {
  const slider = $('#your-slider-id');
  slider.off('change').on('change', function(values, handle) {
    // Do something
  });
});

2. 分开调用，避开链式

如果是插件的off方法不支持链式，最简单的办法就是把调用拆成两行：

// 先解绑事件
slider.off('change');
// 再绑定新事件
slider.on('change', function(values, handle) {
  // Do something
});

这样不管off返回什么，都不会影响后续的on调用。

3. 强制确保链式调用的对象存在

如果还是想用链式写法，可以先判断slider的长度（是否选中了元素），再执行逻辑：

slider.length && slider.off('change').on('change', function(values, handle) {
  // Do something
});

这样只有当slider是有效的非空jQuery对象时，才会执行后面的事件绑定。

额外提示 #

如果你用的是第三方滑块插件，建议去看它的官方文档，确认事件解绑的方法名是不是off——有些插件可能用unbind或者自定义的方法名（比如offChange），用错方法也会导致奇怪的错误哦。

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