[英]When I click a checkbox in a knockout table row, the tr click event overrides the checkbox state change
I have a knockout table with checkboxes (for the example here, I've limited to one checkbox per row). 我有一个带复选框的淘汰表(这里的例子,我每行限制一个复选框)。 when a checkbox is clicked, it should flip state (as you expect).
单击一个复选框时,它应该翻转状态(如您所料)。 however, I also have a click event and select event on the table row, which is conflicting with the checkboxes...
但是,我在表格行上也有一个点击事件和选择事件,这与复选框有冲突...
<table>
<tbody data-bind="foreach: namespace.divResults.model">
<tr data-bind="click: $root.selectItem, css: {selected: $root.isSelected($data)}">
<td data-bind="text: Title"></td>
<td data-bind="text: Surname"></td>
<td data-bind="text: PostCode"></td>
<td><input type="checkbox" data-bind="checked: Excluded, click: $root.toggleExcluded"></td>
<td data-bind="text: Notes" style="display:none"></td>
<tr>
<tbody>
<table>
<div>
<!-- ko with: $root.selectedItem -->
<textarea data-bind="textInput:Notes"></textarea>
</div>
and the javascript: 和javascript:
(function(ns) {
ns.divResults = null;
var resultsViewModel = function() {
var self = this;
self.model = ko.observableArray();
self.selectedItem = ko.observable();
self.selectItem = function(row){ self.selectedItem(row); }
self.isSelected = function (row) { return self.selectedItem() === row; }
self.toggleExcluded = function() {
return true;
}
}
}
I've tried using clickBubble event, but this blocks the actions of the click event on the table row, which works fine in any case. 我已尝试使用clickBubble事件,但这会阻止表行上的click事件的操作,在任何情况下都可以正常工作。 What I find is that clicking a row's checkbox changes its' state correctly, but then gets put back when the row click does its thing.
我发现点击一行的复选框正确地改变了它的状态,但是当行点击它的东西时它会被放回去。
I've used an actual checkbox, not sure if this is your requirements or not, anyway this is the column with the checkbox 我使用了一个实际的复选框,不确定这是否是您的要求,无论如何这是带有复选框的列
<td>
<input type="checkbox" data-bind="checked: Excluded"/>
</td>
Having a checkbox with checked binding deals with setting the Excluded flag and checking the checkbox at the same time. 使用带有选中绑定的复选框处理设置Excluded标志并同时选中复选框。 In the row click handler I return true to allow the event to propagate down to the checkbox, without this the checkbox won't work because the event won't propagate down to it
在行单击处理程序中,我返回true以允许事件向下传播到复选框,如果没有此复选框将无效,因为事件不会传播到它
self.selectItem = function (row) {
self.selectedItem(row);
return true;
};
Here is a fiddle with a working example, I've added an input at the bottom that shows the status of Excluded as well 这是一个工作示例的小提琴,我在底部添加了一个输入,显示了Excluded的状态
http://jsfiddle.net/5dk0hqnc/8/ http://jsfiddle.net/5dk0hqnc/8/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.