使用jQuery和Bootstrap时，输入框keypress事件无法触发计算

开发的简易货币转换器，点击币种下拉按钮（USD/JPY/GBP）时计算功能正常，但在id为totalCoinValue的输入框中输入数值或通过上下箭头增减数值时，计算函数无法触发。

原代码 #

JavaScript部分

$('.dropdown-menu span').click(function exchanger() {

  $('#currencybtn').text($(this).text());

  var SelectedCurrency = $("#currencybtn").text();
  var currentTokenPrice = $("#currentprice").text();
  var toBeConvertedValue = $("#totalCoinValue").val();

  if (SelectedCurrency == "USD") {
    var bnbValue = currentTokenPrice * (80 * toBeConvertedValue);
    var resultValue = parseFloat(bnbValue).toFixed(4)

    document.getElementById("totalTokenResult").innerHTML = ("= " + resultValue + " CHF");


  } else if (SelectedCurrency == "JPY") {
    var bnbValue = currentTokenPrice * (70 * toBeConvertedValue);
    var resultValue = parseFloat(bnbValue).toFixed(4)
    document.getElementById("totalTokenResult").innerHTML = ("= " + resultValue + " CHF");

  } else if (SelectedCurrency == "GBP") {
    var bnbValue = currentTokenPrice * (100 * toBeConvertedValue);
    var resultValue = parseFloat(bnbValue).toFixed(4)
    document.getElementById("totalTokenResult").innerHTML = ("= " + resultValue + " CHF");

  } else {
    var bnbValue = 0;

  }
});

$('#totalCoinValue input').on('keypress', function exchanger() {

});

HTML部分

<script src="https://code.jquery.com/jquery-3.1.1.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Google fonts CSS -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<p class="text-uppercase m-0     BelowTextNumber fs-2 fw-bold "> = <span id="currentprice" class="fs-2">50</span>CHF</p>
<div class="col-12 ms-1">
  <p class="text-uppercase mt-2  dbHeading" style="margin-bottom:5px;">Converter</p>
  <form class="" action=" " method="post">
    <div class="input-group mb-3">
      <input id="totalCoinValue" type="number" value="0" class="form-control" aria-label="Text input with dropdown button" required>
      <button id="currencybtn" class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> </button>
      <ul class="dropdown-menu dropdown-menu-end">
        <li><span class="dropdown-item">USD</span></li>
        <li><span class="dropdown-item">JPY</span></li>
        <li><span class="dropdown-item">GBP</span></li>
      </ul>
    </div>
  </form>
  <p class="text-uppercase mt-2   resultext fs-5" style=" "><span id="totalTokenResult">=0.0000 CHF</span> </p>
</div>

问题原因 #

1. 选择器错误：$('#totalCoinValue input')是无效选择器，totalCoinValue本身就是input元素，无需嵌套选择。
2. 事件类型不全面：keypress仅响应按键输入，无法覆盖输入框上下箭头增减、粘贴等数值变化场景。
3. 代码冗余：下拉菜单和输入框的计算逻辑重复，未实现复用。

修改后的解决方案代码 #

JavaScript部分

// 提取计算逻辑为独立函数，实现复用
function calculateCurrency() {
  const selectedCurrency = $("#currencybtn").text().trim();
  const currentTokenPrice = parseFloat($("#currentprice").text());
  const toBeConvertedValue = parseFloat($("#totalCoinValue").val()) || 0;
  
  let resultValue = 0;
  switch(selectedCurrency) {
    case "USD":
      resultValue = (currentTokenPrice * 80 * toBeConvertedValue).toFixed(4);
      break;
    case "JPY":
      resultValue = (currentTokenPrice * 70 * toBeConvertedValue).toFixed(4);
      break;
    case "GBP":
      resultValue = (currentTokenPrice * 100 * toBeConvertedValue).toFixed(4);
      break;
    default:
      resultValue = 0;
  }
  
  $("#totalTokenResult").text(`= ${resultValue} CHF`);
}

// 下拉菜单点击事件
$('.dropdown-menu span').click(function() {
  $('#currencybtn').text($(this).text());
  calculateCurrency();
});

// 输入框数值变化事件（覆盖所有数值修改场景）
$('#totalCoinValue').on('input', calculateCurrency);

// 页面初始化时默认设置币种为USD并执行计算
$(document).ready(function() {
  $('#currencybtn').text('USD');
  calculateCurrency();
});

HTML部分（无需修改，保留原代码即可）

修改说明 #

• 把重复计算逻辑封装成calculateCurrency函数，下拉点击和输入框变化都调用该函数，减少冗余代码。
• 修正输入框事件选择器为$('#totalCoinValue')，改用input事件，确保所有数值修改操作都能触发计算。
• 用trim()处理币种文本，避免空格导致判断错误；添加parseFloat转换数值并处理输入为空的情况，防止出现NaN错误。
• 页面初始化时默认设置币种为USD并执行计算，优化初始体验。

内容的提问来源于stack exchange，提问作者Marts 114