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

回答

相關問題