如何避免嵌套jQuery .on()事件处理程序的重复调用？

你的代码核心问题是在input事件回调里重复绑定change事件——每输入一个字符，input事件触发一次，就给#mySelector多绑一次change监听。当你选择下拉选项时，所有绑定过的回调都会执行，所以console.log()的次数等于输入字符数。

下面提供两种可行的解决方案：

方案1：绑定前移除旧的事件监听 #

在每次绑定change事件前，先用off('change')清除之前的监听，避免事件叠加：

function setOptions(prefix) {
  // in actual setting, pages = externalAPI(prefix)
  let pages = [prefix + "(a)", prefix + "(b)", prefix + "(c)"]
  $('#mySelector').html(
    pages.map(function(page, i) {
      return $("<option />").val(i).text(i + ': ' + page)
    }))
  return pages;
};

function setSelected(val) {$('#mySelected').html(val)};

$(function() {
  $('#myInput').on('input', function() {
    let options = setOptions($(this).val())
    setSelected(options[0]);
    // 先移除旧的change监听，再绑定新的
    $('#mySelector').off('change').on('change', function(e) {
      console.log(this.value);
      setSelected(options[this.value]);
    })
  });
});

方案2：将change事件移到input事件外部（更推荐） #

把change事件的监听逻辑抽离到input事件外面，只绑定一次。通过元素的data()方法存储选项数据，避免依赖input回调里的变量：

function setOptions(prefix) {
  // in actual setting, pages = externalAPI(prefix)
  let pages = [prefix + "(a)", prefix + "(b)", prefix + "(c)"]
  $('#mySelector')
    .html(pages.map(function(page, i) {
      return $("<option />").val(i).text(i + ': ' + page)
    }))
    .data('pages', pages); // 把选项数据存在元素的data属性中
  return pages;
};

function setSelected(val) {$('#mySelected').html(val)};

$(function() {
  // 只绑定一次change事件
  $('#mySelector').on('change', function(e) {
    let pages = $(this).data('pages');
    console.log(this.value);
    setSelected(pages[this.value]);
  });

  $('#myInput').on('input', function() {
    let options = setOptions($(this).val())
    setSelected(options[0]);
  });
});

方案2优势 #

• 避免重复绑定事件，减少不必要的内存占用
• 逻辑分离，代码结构更清晰易维护
• 无需每次执行解绑/重新绑定的操作，性能更优

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