hộp kiểm knockoutjs và nhấp vào phụ huynh td

Question

Tôi có một bảng có một hàng. Hàng có một TD (với một hộp kiểm trong nó) và trên TD tôi có một chức năng bấm. Vì vậy, khi TD được nhấp vào hộp kiểm sẽ được kiểm tra/bỏ chọn.

Nó hoạt động tốt khi tôi bấm vào TD, nhưng khi nhấp vào hộp kiểm bên các (hình ảnh) giá trị của checkbox không thay đổi (Nó không nhận được checked/unchecked)

Tình hình truy nã là:

1. Khi tôi nhấp vào hộp kiểm, các (hình ảnh) giá trị của những thay đổi hộp kiểm và tôi có thể gọi một hàm. (ví dụ để thực hiện cuộc gọi AJAX)

2. Khi tôi bấm vào TD, các (hình ảnh) giá trị của các thay đổi của hộp kiểm và tôi có thể gọi chức năng. (ví dụ để thực hiện cuộc gọi AJAX)

Làm thế nào chúng ta có thể đạt được điều này?

Sample Code

Answer 1

Để tránh các vấn đề sự kiện nhấp chuột, sử dụng các yếu tố label để tạo ra một khu vực có thể click lớn hơn. Ở đây tôi đã thực hiện các nhãn một yếu tố khối để nó chiếm toàn bộ td:

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

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

Answer 2

cách nhấn vào hộp kiểm gọi mã hander nhấp chuột cho td:

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

này loại bỏ việc kiểm tra.

Answer 3

Td tổ chức sự kiện dường như được trọng sự kiện kiểm tra bấm các của đầu vào

Answer 4

Vấn đề là xử lý nhấp chuột cho TD cháy cũng có khi bạn nhấp vào checkbox, có nghĩa là checkbox bị thay đổi bởi cả xử lý mặc định nhấp chuột cho số checkbox và trình xử lý nhấp tùy chỉnh của bạn cho số TD (chúng chống lại nhau). Giải pháp là để ngăn chặn các nhấp chuột trên checkbox từ sủi bọt đến TD. Bạn có thể làm điều này trong Knockout với ràng buộc này: click:function(){return true}, clickBubble:false.

Đây là nó trong hành động: http://jsfiddle.net/mbest/Eatdh/12/

Tôi nghĩ, tuy nhiên, sử dụng một label là một cách tiếp cận tốt hơn (xem câu trả lời khác của tôi).

Answer 5

Đây không phải là khá khô, nhưng nhanh chóng và chức năng của nó: fiddle

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