延迟点击事件

Question

每当我使用 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 识别点击复选框时的点击，而不必返回？我想确保人们不会在没有看到选项的情况下单击 下一步 按钮。

Answer 1

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>

解释：

我已经从 div 中删除了 class outputs 并将其添加到 input 字段中，我还从选择器中删除了 touchstart 事件

延迟点击事件

Delayed Click Event

html

jquery

click

onclick

touchstart