evento click se disparó dos veces - jQuery

Question

Tengo el siguiente código HTML simplificada:

<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> 

Al hacer clic en 'foo' las 200x200 div funciona bien, y eleva el evento click de la casilla de verificación en su interior.

Sin embargo, cuando hago clic exactamente en la casilla de verificación, activa su evento 'normal', más el evento jquery bound anterior, lo que significa que la casilla de verificación se revisa a sí misma, luego se desmarca nuevamente.

¿Hay alguna manera ordenada de evitar que esto suceda?

Answer 1

Eventos burbuja. Necesitaría probar el e.target que se hizo clic.

Y si solo está intentando marcar/desmarcar la casilla, debe establecer su propiedad checked.

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

EDIT: ha corregido un par de errores.

demostración de trabajo:http://jsfiddle.net/LhSG9/

Answer 2

Debe detener el clic en la casilla de verificación para que no suba hasta la div.

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

Answer 3

incluyen la siguiente función en yiur $(document).ready function -

dar un documento decir de prueba a su casilla de verificación y luego -

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

Answer 4

Esto sucede porque cuando se hace clic en la casilla de verificación también se está haciendo clic en el div porque la casilla de verificación está dentro de él. Entonces, lo que debe hacer es capturar cuando el usuario hace clic dentro del div pero no en la casilla de verificación. Si el usuario haga clic en la casilla de verificación que actuará con su comportamiento predeterminado de cheques/desmarcando

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

Answer 5

¿Qué tal esto: en lugar de utilizar un div, utilice un <label>. Es más semánticamente correcto, hace exactamente lo que quiere y no requiere JavaScript.

Ejemplo de trabajo aquí: http://jsfiddle.net/LhSG9/1/