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