jQuery的change事件为何多次触发？绑定动态select时触发次数逐次增加

为动态添加的<select>元素绑定事件处理程序时，出现change事件触发次数逐次累加的异常：

• 第一次修改下拉选项时，事件触发1次
• 第二次修改时，事件触发2次
• 第三次修改时，事件触发3次
• 后续每一次修改，触发次数都会较前一次多1次

错误实现的JS逻辑 #

$(document).on('change', '.gender-select', function() {
  $('.gender-select').change(function() {
    alert($(this).find("option:selected").text());
  });
});

配套HTML基础结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select class="gender-select">
  <option value="">- Select Gender -</option>
  <option value="m">Male</option>
  <option value="f">Female</option>
</select>

问题核心为委托事件处理程序内部嵌套了静态事件处理程序：

• 外层绑定的是document级别的事件委托，用来匹配动态存在的.gender-select元素；内层代码在委托事件的回调函数里，又给所有.gender-select元素绑定了一次静态的change事件。
• 每一次外层的委托change事件被触发，内层都会重新执行静态事件绑定逻辑，重复绑定的事件不会自动去重或解绑，会逐层累加到目标元素上，最终造成触发次数随操作次数线性增长。

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