knockoutjs复选框,然后单击父td

Question

我有一张桌子.该行有一个TD(其中有一个复选框),在TD上我有一个点击功能.因此,当单击TD时,将选中/取消选中该复选框.

当我点击TD时它工作正常,但是当点击复选框时,复选框的(可视)值不会改变(它没有被选中/取消选中)

想要的情况是:

1. 当我单击复选框时,复选框的(可视)值发生变化,我可以调用一个函数.(例如,进行AJAX调用)

2. 当我点击TD时,复选框的(可视)值会发生变化,我可以调用一个函数.(例如,进行AJAX调用)

我们怎样才能做到这一点？

示例代码

Answer 1

问题是,TD当您单击时checkbox,也会发生火灾的点击处理程序,这意味着checkbox由于它们的checkbox自定义单击处理程序TD(它们相互抵消)的默认单击处理程序更改了.解决方案是防止点燃checkbox从冒泡到TD.您可以使用此绑定在Knockout中执行此操作:click:function(){return true}, clickBubble:false.

这是在行动:http://jsfiddle.net/mbest/Eatdh/12/

但我确实认为使用a label是一种更好的方法(参见我的另一个答案).

Answer 2

为了避免点击事件问题，请使用该label元素使更大的区域可点击。在这里，我将标签设置为块元素，因此它占据了整个td：

<td>
    <label style="display: block">
        <input type="checkbox" data-bind="checked: checkBox" />
    </label>
</td>

请参阅http://jsfiddle.net/mbest/LsxSh/