javascript - 基于 Select 标签中的 addEventListener 的切换不起作用

Question

我正在尝试验证表单中的文本输入，以使用 javascript 和 Jquery 构建基本转换器。通过 addEventListener 函数，我能够调用与 Select 标记中的选项“2”、“10”和“16”相对应的 switch case。

问题是它仅适用于 Select 标记上的第一个“更改”事件以及当我从基数减少时。例如:如果我选择基数 2，然后更改为 10 或 16，它仍然只接受 0 或 1 个字符，而从 16 更改为 10 或 2 则工作正常。我该如何修复它？

这是我的代码:

$(document).ready(function() {
  var getFromBase = document.getElementById('frombase-select');

  getFromBase.addEventListener('change', function() {
    switch (getFromBase.value) {
      case '2':
        $('#number').keypress(function(key) {
          if ((key.charCode < 48 || key.charCode > 49) && (key.charCode != 13)) {
            return false;
          }
        });
        break;

      case '10':
        $('#number').keypress(function(key) {
          if ((key.charCode < 48 || key.charCode > 57) && (key.charCode != 13)) {
            return false;
          }
        });
        break;

      case '16':
        $('#number').keypress(function(key) {
          if ((key.charCode < 48 || key.charCode > 57) && (key.charCode < 97 || key.charCode > 102) && (key.charCode < 65 || key.charCode > 70) && (key.charCode != 13)) {
            return false;
          }
        });
        break;
    } // End switch
  }); // End addEventListener
}); // End document.ready

.wrapper {
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

form {
  font-size: 20px;
  width: 300px;
  text-align: center;
  border: 1px solid black;
  padding: 20px;
}

form>* {
  margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <form action="index.php" method="post">
    <div class="form-group flex-center">
      <label>From Base:</label>
      <select id="frombase-select" name="frombase">
        <option selected disabled hidden>Enter a base</option>
        <option>2</option>
        <option>10</option>
        <option>16</option>
      </select>
    </div>
    <div class="form-group flex-center">
      <label>Number:</label>
      <input type="text" id="number" name="number">
    </div>
  </form>
</div>

Answer 1

问题在于事件处理程序正在堆积。您永远不会重置处理程序，因此第一个选定的基础的验证永远不会解除绑定(bind)。这会导致事件仅触发第一个选定案例的回调。

您可以使用off删除以前的处理程序。来自文档:

Description: Remove an event handler.

.off( event )

event

Type: Event

A jQuery.Event object.

您只需将事件名称作为字符串传递即可删除事件处理程序。示范off删除事件处理程序:

$("#number").off("keypress"); //Callback is optional

Here's更新的 fiddle 。