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.