javascript - 为什么 jQuery 的更改事件会多次触发？

Question

我正在尝试将事件处理程序绑定(bind)到动态添加的 <select>元素。但每次选择列表更改时，该事件都会额外触发 1 次。 (第一次会触发一次，然后两次，然后三次，依此类推)

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

<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>

https://jsfiddle.net/L3p9ez5d/3/

解决方案

谢谢罗里·麦克罗森 (Rory McCrossan) 的回答。非常简单，我在委托(delegate)事件处理程序内部有一个静态事件处理程序，因此当委托(delegate)处理程序触发时，处理程序不断添加。

Answer 1

原因是因为您正在嵌套事件处理程序。您已在委托(delegate)事件处理程序中放置了一个静态事件处理程序，因此每次发生事件时都会添加另一个处理程序。这也是为什么当您第一次选择一个选项时没有任何反应的原因。

要解决此问题，只需删除内部静态事件处理程序即可:

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

<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>