每当我使用on（click）事件时，只有在访问另一个元素时才记录该点击。
$(".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/或上面的代码段显示了我正在谈论的确切问题。 这个想法是，只要两个数字输入的总和大于8，就会出现其他选项。每当我单击复选框时，这些选项也应该出现。但是，每当我移回数字输入时，单击该复选框似乎只会注册。
JQUery是否有一种方法可以识别单击复选框的单击，而不必后退？我要确保人们在未看到选项的情况下不要单击 Next 按钮。