通过JS添加新的HTML复选框将停止其他JS功能

Question

我编写了一些JS代码，该代码允许选中4个复选框中的一个或不选中，并填充到数据中。但是，当我通过其他添加/删除HTML的JS更改复选框时，即使复选框的代码保持完全相同，代码也会停止工作（我比较了HTML post JS函数）。

主要担心的是JS涵盖了任何复选框单击事件，但是在更改HTML之后，由于第一个console.log（）甚至没有出现，因此它似乎没有任何确认。

stumped.com

HTML（前后）：

<table class="table table-sm">
  <tr>
    <th>Metric</th>
    <th>Value (Decimal)</th>
    <th colspan="2">Simulation distribution (unchecked = no simulation)</th>
  </tr>
  <tr>
    <td id="middle">
      High growth rate of CFs<br> (intrinsic (ROE x RR) = {{"{0:.2f}%".format(data['ROE']*data['income'][data['income']['numPeriods'] - 1]['Retention rate']*100)}})
    </td>
    <td id="middle">
      <input class="form-control" name="highoption-input" max="1" min="0" step="any" type="number" /><br>
    </td>
    <td id="middle">
      <input type="checkbox" name="highoption" value="normal">Normal<br>
      <input type="checkbox" name="highoption" value="uniform">Uniform<br>
      <input type="checkbox" name="highoption" value="triangle">Triangle<br>
      <input type="checkbox" name="highoption" value="skewnormal">Skew normal<br>
    </td>
    <td id="highoption"></td>
  </tr>
</table>

JS：

$("input:checkbox").on('click', function() {
  console.log("WTF??");
  var $box = $(this);
  if ($box.is(":checked")) {
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    $(group).prop("checked", false);
    $box.prop("checked", true);
    var id = $box.attr("name");
    console.log(id);
    var option = $("#" + id);
    try {
      var value = $("[name='" + id + "-input']").val()
    } catch {
      var value = ""
    }
    console.log(value)
    try {
      removeElement(id + 'simput')
    } catch {
      var error = "Nothing mate"
    }
    if ($box.val() == 'normal') {
      var html = `some data`
      addElement(id, 'p', id + 'simput', html);
    } else if ($box.val() == 'uniform') {
      var html = `some data`
      addElement(id, 'p', id + 'simput', html);
    } else if ($box.val() == 'triangle') {
      var html = `some data`
      addElement(id, 'p', id + 'simput', html);
    } else {
      var html = `some data`
      addElement(id, 'p', id + 'simput', html);
    }
  } else {
    $box.prop("checked", false);
  }
});