knockoutjs复选框，然后单击父项td

我有一个包含一行的表。该行有一个TD（带有一个复选框），在TD上我有一个点击功能。因此，当点击TD时，复选框将被选中/取消选中。knockoutjs复选框，然后单击父项td

当我点击了TD，但该复选框，当点击复选框的（视觉）值不会更改（它没有得到选中/取消）

的通缉的情况是它工作正常：

当我点击复选框的复选框的变化（视觉）值，我可以调用一个函数（例如，使一个AJAX调用）
当我点击了TD的（可视化）复选框的值发生变化，我可以调用一个功能。（例如进行AJAX呼叫）

我们该如何做到这一点？

Sample Code

来源

2012-05-30 Blottt

为了避免click事件的问题，使用label元素做出更大的区域点击。在这里，我制作的标签块元素所以它占据了整个td：

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

见http://jsfiddle.net/mbest/LsxSh/

来源

2012-05-31 01:32:55

谢谢！这是诀窍。我已经通过添加点击功能进行了一些编辑。 [http://jsfiddle.net/LsxSh/4/](http://jsfiddle.net/LsxSh/4/） – Blottt

点击复选框调用点击投手代码为TD：

self.checkBox(!self.checkBox());

这消除了检查。

来源

2012-05-30 20:23:48

诚然，现在的问题是我们如何才能避免这种情况。我在第一篇文章中指定了我正在寻找的内容。 – Blottt

你改变了问题:-) –

是的：P ...这是不正确的形成。 – Blottt

Td的事件似乎是压倒一切的，输入的检查点击事件

来源

2012-05-30 20:27:33 Shay

的问题是，对于TD火灾单击处理也当您单击checkbox，这意味着checkbox被双方默认的点击处理程序改变checkbox和您的自定义点击处理程序TD（它们相互抵消）。解决方案是防止点击checkbox冒泡到TD。您可以使用此绑定在Knockout中执行此操作：click:function(){return true}, clickBubble:false。

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

我认为，然而，使用label是一个更好的方法（见我的其他答案）。

来源

2012-05-30 22:19:31

我更喜欢这个，因为它可以防止额外的HTML混乱。 – Tyrsius

'label'可能是问题中场景的更好方法，但这正是我需要的解决方案，因为我的点击处理程序在整个'tr'上。 –

这是不是很干燥，而且其快速和功能：fiddle

<td data-bind="click:tdClick"> 
     <input type="checkbox" data-bind="checked: checkBox, click:tdClick" /> 
</td>

来源

2012-05-31 00:05:45 Tyrsius

下面是另一种方法，也可以工作：将复选框上的数据绑定更改为'checked：checkBox，click：function（）{return true;}，clickBubble：false'。在你的复选框被检查然后取消选中，然后在你点击它时再次检查。 –

@MichaelBest我认为这是迄今为止最好的解决方案。为什么不把它作为答案？ – Tyrsius

没错。我会将其添加到我的答案中。 –

knockoutjs复选框，然后单击父项td

回答

相关问题