javascript - 为什么这个 onchange 选择选项和函数运行多个 jQuery [很困惑]

Question

我在选择选项更改后运行函数，但为什么在选择选项多个更改为后函数运行多个。

$(document).ready(function() {
  $(document).on('change', '#bbp_forum_id', function(e) {
    var value = $(this).val();
    select_value(value);
  });

  var select_value = function(value) {
    $('#bbp_topic_tags').on('keyup', function() {
      console.log($(this).val() + value);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="bbp_forum_id" id="bbp_forum_id" tabindex="103">
  <option value="0">Select...</option>
  <option value="6">A</option>
  <option value="8">B</option>
  <option value="4">C</option>
</select>

<input type="text" id="bbp_topic_tags" />

请这样做:选择多个选项(首先:选择 A，然后选择 B 和 C)并在文本输入中写一些东西。查看控制台日志，您可以看到函数运行了多个。为什么？

我只想获取最后选择的值并且不运行函数 multipe。现场直播:https://jsfiddle.net/2Lpfgra6/1/

Answer 1

问题是因为每次更改选择时您都附加了一个新的 keyup 事件处理程序。

要解决此问题，您只需删除 change 事件处理程序并在加载时附加 keyup 处理程序。然后，您可以在按下每个键时从 select 中读取值，如下所示:

$('#bbp_topic_tags').on('keyup', function() {
  console.log($(this).val() + $('#bbp_forum_id').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="bbp_forum_id" id="bbp_forum_id" tabindex="103">
  <option value="0">Select...</option>
  <option value="6">A</option>
  <option value="8">B</option>
  <option value="4">C</option>
</select>

<input type="text" id="bbp_topic_tags" />