Question

我多次使用jquery输入事件，并且一切正常。但最近我将其用于输入复选框类型和... 我不知道为什么在许多版本的Chrome和Firefox中都无法使用

就像在这里写的那样，输入文本类型的jquery输入事件可以正常工作，但是输入类型复选框的jquery输入事件不起作用。

<input class="form-check-input" type="checkbox" value="" id="sampleCheck1">
<script>
     $("#sampleCheck1").on("input", function(){
          window.alert("checkbox select event fired.")
     })
</script>

// find elements
var checkbox = $("#sampleCheck1")
var textbox = $("#textbox1")


// handle click and add class
checkbox.on("input", function(){
  window.alert("checkbox 'input' event fired.")
})

textbox.on("input", function(){
  window.alert("textbox 'input' event fired.")
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 18px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 340px;
}

.form-check {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 16px;
  color: #fff;
  margin-bottom: 5px;
}

.form-group{
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 16px;
  color: #fff;
  text-align: left;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <p>Test 'select' event for checkbox</p>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="sampleCheck1">
    <label class="form-check-label" for="sampleCheck1">
      Checkbox Sample 
    </label>
</div>
<div class="form-group">
    <label for="textbox1">Textbox Sample</label>
    <input type="text" class="form-control" id="textbox1" >
  </div>
</div>

Answer 1

这是Edge中的a confirmed bug。您的复选框可在Chrome和Firefox（以及Opera according to CertainPerformance）中运行，但不能在Edge上运行（即使我直接使用addEventListener而不是使用jQuery也是如此），the specification说该事件应该触发，所以这可能是Edge中的错误。

在他们修复该错误之前（截至2018年8月19日，该漏洞已分配给某人进行修复），与复选框一起使用的通常事件为click（即使复选框选中时也会触发是使用键盘而不是鼠标进行切换的。）

Answer 2

尝试一下

<script>
 $("#sampleCheck1").on("change", function(){
      window.alert("checkbox select event fired.")
 })
</script>

Answer 3

input事件似乎无法在JQuery上的复选框的属性更改上正确触发。最好改用change事件。

$(function(){
   $("#sampleCheck1").on("change", function(){
      window.alert("checkbox select event fired.")
   });
});

您可以将此事件用于html文档中的所有类型的输入。

为什么jquery输入事件不适用于带有类型复选框的输入？

3 个答案: