Kendo Checkbox check event
Question
I am trying to catch the kendo checkbox event, but I couldn't get it work. I am sure I am missing something. As I spent more than an hour in this simple thing, I am very tired. Following is the code snippet.
HTML
<div class="bottomPadding row">
<div class="col-md-4 col-sm-4 col-xs-12 col">
<label>Send Activation Link</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 col">
<input id="sendLink" type="checkbox" data-bind="checked: Account.IsLink" />
</div>
</div>
And the JS code,
$("#sendLink").click(function () {
if (this.checked) {
console.log("hit");
}
});
Please correct me where I did mess.
PS: I have referred few SO answers, some doesn't have answers and some answers are not working in my case.
2 answers
solution1
4 ACCPTED 2018-04-20 10:59:55
I have ran your code on my machine and have received the click event fine, here is my code:
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12 col">
<label>Send Activation Link</label>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 col">
<input id="sendLink" type="checkbox" data-bind="checked: Account.IsLink" />
</div>
</div>
<script>
$(document).ready(function () {
clickHookup();
})
</script>
And in my JS file:
function clickHookup() {
$("#sendLink").click(function () {
if (this.checked) {
console.log("hit");
}
});
}
solution2
2 2018-04-20 11:04:34
The above code works fine, but that is not kendo. It is pure jQuery. To use kendo please check this
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://da7xgjtj801h2.cloudfront.net/2015.2.624/js/kendo.ui.core.min.js"></script> <title>JS Bin</title> </head> <body> <div class="bottomPadding row"> <div class="col-md-4 col-sm-4 col-xs-12 col"> <label>Send Activation Link</label> </div> <div class="col-md-6 col-sm-6 col-xs-12 col"> <input id="sendLink" type="checkbox" data-bind="checked: Account.IsLink" /> </div> <div class="col-md-4 col-sm-4 col-xs-12 col"> <label>Copy Activation Link</label> </div> <div class="col-md-6 col-sm-6 col-xs-12 col"> <input id="sendLinkCopy" type="checkbox" data-bind="checked: Account.IsLink" /> </div> </div> <script> $("#sendLink").click(function () { if (this.checked) { console.log("hit"); } }); var viewModel = kendo.observable({ Account: { IsLink: false } }); kendo.bind($("#sendLink"), viewModel); kendo.bind($("#sendLinkCopy"), viewModel); </script> </body> </html>
Note that sendLinkCopy updates based on changes in sendLink checkbox. It is handled by kendo.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.