zdarzenia kliknięcia wyrzuceniu dwukrotnie - jquery

Question

Mam następujący uproszczony HTML:

<div class="foo" style="width:200px; height:200px;"> 
    <input type="checkbox" /> 
</div> 

<script type="text/javascript"> 
    $('.foo').click(function(){$(this).find('input:checkbox')[0].click();}); 
</script> 

Kliknięcie 'foo' The 200x200 DIV działa dobrze, i podnosi zdarzenie click do wyboru w środku.

Jednak gdy kliknę dokładnie to pole wyboru, uruchomi ono swoje "normalne" zdarzenie, a także zdarzenie związane z jquery powyżej, co oznacza, że ​​pole wyboru samo się sprawdza, a następnie odznacza się ponownie.

Czy istnieje porządek, aby temu zapobiec?

Answer 1

pakietowe bańki. Będziesz musiał przetestować klikniętą e.target.

Jeśli próbujesz zaznaczyć/odznaczyć pole, powinieneś ustawić jego właściwość checked.

$('.foo').click(function(e){ 
    if(e.target.tagName.toUpperCase() !== 'INPUT') { 
     var cbox = $(this).find('input:checkbox')[0]; 
     cbox.checked = !cbox.checked; 
    } 
}); 

EDIT: Poprawiono kilka błędów.

demo robocza:http://jsfiddle.net/LhSG9/

Answer 2

Musisz zatrzymać kliknięcie pola wyboru, aby nie bańka się do elementu div.

$('.foo input:checkbox').click(function(e){ 
    // will stop event from "bubbling" 
    e.stopPropagation() 
}) 

Answer 3

zawierać następujące funkcję w yiur $(document).ready function -

dać id powiedzieć testu do wyboru następnie -

$('#test').click(function(){ 
return false; 
}); 

Answer 4

Zdarza się, ponieważ po kliknięciu na pole wyboru masz również klikając na div ponieważ pole wyboru jest wewnątrz niego. To, co powinieneś zrobić, to przechwytywanie, gdy użytkownik kliknie wewnątrz div, ale nie ma pola wyboru. Jeśli użytkownik nie kliknie pole wyboru będzie działać z kontroli domyślne zachowanie/odznaczając

$('.foo:not(':checkbox')').click(function(){ 
    $(this).find('input:checkbox')[0].click(); 
}); 

Answer 5

Jak ten temat: zamiast używać div, użyj <label>. Jest bardziej semantycznie poprawny, robi dokładnie to, co chcesz i nie wymaga JavaScript. przykład

Praca tutaj: http://jsfiddle.net/LhSG9/1/