Question

我正在尝试捕捉kendo复选框事件，但我无法让它工作。我相信我错过了一些东西。因为我在这个简单的事情上花了一个多小时，我很累。以下是代码段。

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>

和JS代码，

$("#sendLink").click(function () {
    if (this.checked) {
        console.log("hit");
    }
});

请纠正我弄得一团糟的地方。

P.S：我已经提到了几个SO答案，有些答案没有答案，而且我的案例中有些答案不起作用。

Answer 1

我已经在我的机器上运行了你的代码并且收到了点击事件，这是我的代码：

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

在我的JS文件中：

function clickHookup() {
    $("#sendLink").click(function () {
      if (this.checked) {
        console.log("hit");
      }
    });
}

Answer 2

上面的代码工作正常，但这不是kendo。它是纯粹的jQuery。要使用kendo，请检查此

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

请注意，sendLinkCopy会根据sendLink中的更改复选框进行更新。它由剑道处理。

剑道复选框检查事件

2 个答案: