Delayed Click Event

Question

Whenever I use a on(click) event the click is registered only when accessing another element.

$(".extensions").hide();
$('.outputs').on("touchstart click", function(e) {
  var analogueOutputsVar = $("#AOUTP").val();
  var onOffOutputsVar = $("#OOOUTP").val();
  var cboxVar = $("#BOX");
  var sumVar = parseFloat(analogueOutputsVar) + parseFloat(onOffOutputsVar);

  if (sumVar > 8 || cboxVar.is(':checked')) {
    $(".extensions").show()
  } else {
    $(".extensions").hide()
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
  justify-content:center;
}

* {
  box-sizing: border-box;
}
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 30px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

input[type=number]{
    width: 120px;
}
</style>
<div class="outputs">
  <div class="row">
    <div class="column">
      ON/OFF Outputs
    </div>
    <div class="column">
      <input type="number" name="OOOUTP" id="OOOUTP" min="0" step="1" max="28" value="0">
    </div>
  </div>
  <div class="row">
    <div class="column">
      Analogue Outputs
    </div>
    <div class="column">
      <input type="number" name="AOUTP" id="AOUTP" min="0" step="1" max="16" value="0">
    </div>
  </div>
</div>
<!---->
<div class="row">
  <div class="column">
    BOXTEST
  </div>
  <div class="column">
    <input class="single-checkbox" type="checkbox" id="BOX" name="COM" value="BOX">
  </div>
</div>
<!---->
<br />
<div class="extensions">
  <legend>What feedback extensions do you need?</legend>
  <div class="row">
    <div class="column">
      TEST1
    </div>
    <div class="column">
      <input class="fb" type="number" name="TEST1" min="0" step="1" value="0">
    </div>
  </div>
  <!---->
  <div class="row">
    <div class="column">
      TEST2
    </div>
    <div class="column">
      <input class="fb" type="number" name="TEST2" min="0" step="1" value="0">
    </div>
  </div>
  <!---->
  <div class="row">
    <div class="column">
      TEST3
    </div>
    <div class="column">
      <input class="fb" type="number" name="TEST3" min="0" step="1" value="0">
    </div>
  </div>
</div>

https://jsfiddle.net/Colar/89g0onc2/5/, or the snippet above shows the exact problem I am talking about. The idea is that whenever the sum of the two number inputs is larger than 8, extra options appear. These options should also appear whenever I click the checkbox. However, the click on the checkbox only seems to register whenever I move back to the number input.

Is there a way for JQUery to recognize the click on clicking the checkbox, without having to move back? I want to make sure that people do not click the Next button without having seen the options.

Answer 1

How about this?

Javascript

$(".extensions").hide();
$('.outputs').on("click", function(e) {
    var analogueOutputsVar = $("#AOUTP").val();
    var onOffOutputsVar = $("#OOOUTP").val();
    var cboxVar = $("#BOX");
    var sumVar = parseFloat(analogueOutputsVar) + parseFloat(onOffOutputsVar);

    if (sumVar > 8 || cboxVar.is(':checked')) {
        $(".extensions").show()
    } else {
        $(".extensions").hide()
    }
});

HTML

<style>
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
  justify-content:center;
}

* {
  box-sizing: border-box;
}
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 30px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

input[type=number]{
    width: 120px;
}
</style>
<div>
  <div class="row">
    <div class="column">
      ON/OFF Outputs
    </div>
    <div class="column">
      <input class="outputs" type="number" name="OOOUTP" id="OOOUTP" min="0" step="1" max="28" value="0">
    </div>
  </div>
  <div class="row">
    <div class="column">
      Analogue Outputs
    </div>
    <div class="column">
      <input class="outputs" type="number" name="AOUTP" id="AOUTP" min="0" step="1" max="16" value="0">
    </div>
  </div>
</div>
<!---->
<div class="row">
  <div class="column">
    BOXTEST
  </div>
  <div class="column">
    <input class="outputs" class="single-checkbox" type="checkbox" id="BOX" name="COM" value="BOX">
  </div>
</div>
<!---->
<br />
<div class="extensions">
  <legend>What feedback extensions do you need?</legend>
  <div class="row">
    <div class="column">
      TEST1
    </div>
    <div class="column">
      <input class="fb" type="number" name="TEST1" min="0" step="1" value="0">
    </div>
  </div>
  <!---->
  <div class="row">
    <div class="column">
      TEST2
    </div>
    <div class="column">
      <input class="fb" type="number" name="TEST2" min="0" step="1" value="0">
    </div>
  </div>
  <!---->
  <div class="row">
    <div class="column">
      TEST3
    </div>
    <div class="column">
      <input class="fb" type="number" name="TEST3" min="0" step="1" value="0">
    </div>
  </div>
</div>

Explanation:

I have removed class outputs from div and added it to the input fields and I have also removed the touchstart event from the selector