可点击 div 内的复选框未被选中 - 敲除

Question

请参阅fiddle。在此 fiddle 中，我在标记为红色背景的可点击 div 中有一个复选框。当您单击 div/ 复选框时，div 的 ID 会记录在控制台上。

HTML

<div id="vm">
  <div class="myDIv" id="MyDiv" data-bind="click : function() 
      {$root.clicked(event)}" style="width : 50px; height : 50px; background-color : red;">
      <input type="checkbox" data-bind="checked : attribute" value="checkbox-1"/>
  </div>
</div>

JS

function MyViewModel(){
    this.attribute = ko.observableArray([]);
    this.clicked = function(event){
        event.preventDefault();
        console.log(event.currentTarget.id); 
    }
}
ko.applyBindings(new MyViewModel());

这里，当我点击它时，复选框不会被选中或取消选中。我该如何实现？

Answer 1

我在HTML代码中添加了return true;如下：

<div class="myDIv" id="MyDiv" data-bind="click : function(){$root.clicked(event); return true;}" style="width : 50px; height : 50px; background-color : red;">
  <input type="checkbox" data-bind="checked : attribute" value="checkbox-1"/>
</div>

看，这个fiddle。

我对 event 对象特别感兴趣，因此我不得不将 click 事件写成 click : function(){$root.clicked(event)}

如果不需要event对象，点击事件可以写成：

<div class="myDIv" id="MyDiv" data-bind="click : clicked" style="width : 50px; height : 50px; background-color : red;">
  <input type="checkbox" data-bind="checked : attribute" value="checkbox-1"/>
</div>

和javascript函数可以写成：

this.clicked = function(event){
    return true;
}

可点击 div 内的复选框未被选中 - 敲除

Checkbox inside clickable div does not get checked- Knockout

jquery

knockout.js