dimanche 19 août 2018

Why jquery input event does not work on input with type checkbox?

I use jquery input event several times and always everything is OK. but recently I used it for input with type checkbox and ... I don't know why it is not work in many of versions of Chrome and Firefox

As was Wrote here jquery input event on input with type text works correctly but on input with type checkbox does not work.

<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>



Aucun commentaire:

Enregistrer un commentaire