Tại sao hộp kiểm này không được tạo, được tạo động với jQuery, được nhấp?

Question

jsFiddle

Tôi đang sử dụng plugin jQuery cho phép người dùng vẽ hộp trong một khu vực. Tôi sử dụng jQuery để đặt một hộp kiểm (cùng với một danh sách thả xuống) trong hộp xuất hiện khi người dùng cho phép đi của nút chuột (điều này là về phía dưới cùng của javascript trong jsFiddle). Vấn đề là, hộp kiểm không thể nhấp được.

tôi có một vài click kiểm tra mã trong _mouseStart, _mouseDrag và _mouseStop sự kiện để ngăn chặn hộp khác từ được tạo ra khi bạn nhấp chuột vào một hộp hiện có, nhưng tôi không nghĩ rằng đây là gây ra vấn đề vì trong danh sách thả xuống được tạo ra có thể được bấm, và hơn nữa nếu bạn loại bỏ mã kiểm tra bấm vào hộp kiểm vẫn không thể nhấp được.

Điều gì khiến hộp kiểm không thể nhấp được? Cảm ơn vì đã đọc.

EDIT: Nhờ câu trả lời VinayC, tôi bây giờ có thể thấy rằng các nhấp chuột đạt hộp kiểm, với mã này:

$('#box').click(function(e){ 
    alert('clicked'); 
    $(this).attr('checked', true); 
}); 

Nhưng dòng $(this).attr('checked', true); không làm kiểm tra hộp kiểm. bất cứ ai đó có thể trả lời tôi tại sao? Tôi đã cập nhật jsFiddle

EDIT 2: Harmen nhận thấy rằng mã gán cùng một id cho mỗi hộp kiểm. Trong mã thực tế có một bộ đếm được gắn vào id, vì vậy mỗi cái là duy nhất, nhưng tôi đã lấy nó ra vì tôi nghĩ đây chỉ là một vấn đề jQuery. Tôi muốn thay đổi jsFiddle, nhưng nếu bạn chỉ cần tạo một hộp (do đó một hộp kiểm), cùng một vấn đề xảy ra.

Answer 1

Tôi đã có không biết tại sao, nhưng trong khi quan trọng xung quanh (có, trên fiddlejs), điều này dường như làm các trick

$('#box', ui.box).click(
     function(evt){ 
      evt.stopPropagation(); 
     } 
    ); 

khi thiết lập hộp. Xem: http://jsfiddle.net/BBh3r/9/

Tôi đã thực sự cố gắng đánh chặn sự kiện và đặt thủ công kiểm tra, nhưng nếu không cần đặt nó thì có thể có sự kiện khác được tạo ở đâu đó phủ nhận lần đầu tiên ..? Nhấp chuột chỉ được kích hoạt một lần.

Có thể liên quan đến building jquery checkbox - can't set checked value

PS. Chỉ được thử nghiệm trên Chrome cho Linux

Answer 2

Dường như các trình xử lý sự kiện cấp cao nhất đang hủy sự kiện nhấp. Thêm trình xử lý sự kiện onclick vào cảnh báo yếu tố hộp kiểm và bạn sẽ thấy nhấp chuột đó chạm đến hộp kiểm.

Answer 3

Bạn đang tạo nhiều hộp kiểm với cùng một số id.

Answer 4

Thực ra nó được kiểm tra trong khi cảnh báo hiển thị, nhưng nó sẽ bị bỏ chọn sau đó. Tôi đoán rằng sau khi xử lý sự kiện của bạn đặt nó để kiểm tra, sự kiện mặc định cho các nhấp chuột (đó là để chuyển đổi dấu kiểm) xảy ra, và kể từ khi nó được kiểm tra vào lúc này, nó sẽ trở thành bỏ chọn một lần nữa. Thử gọi preventDefault từ trình xử lý nhấp chuột.

Answer 5

Bạn cũng có thể thử cách này để có cách tiếp cận phổ quát hơn

Điều này phù hợp với tôi.

$(document).click(function (e) { 
    if (element.tagName == 'INPUT') { 
     if ($(element).attr("type") == 'checkbox') { 
     e.stopPropagation();         
     e.preventBubble();        
     return; 
     } 
    } 
});