Question

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

＆＃13;

$(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);
    });
  }
});

＆＃13;

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

＆＃13;

请这样做： 选择选项倍数（第一个：选择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" />

Answer 2

此问题是您在更改下拉列表时添加新的keyup事件以进行输入。

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

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


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

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

2 个答案: