Klick-Ereignis wird zweimal ausgelöst - jquery

Question

Ich habe die folgende vereinfachte 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>

Das Anklicken des 200x200 Divs 'foo' funktioniert gut und löst das Click-Ereignis für die Checkbox darin aus.

Allerdings, wenn ich genau klicken Sie auf das Kontrollkästchen selbst, es feuert seine "normalen" Ereignis, plus die Jquery gebunden Ereignis oben, was bedeutet, dass das Kontrollkästchen selbst überprüft, dann unchecks selbst wieder.

Gibt es eine saubere Methode, um dies zu verhindern?

Answer 1

Wie wäre es damit: Verwenden Sie statt eines div eine <label> . Es ist semantisch korrekter, tut genau das, was Sie wollen, und erfordert kein JavaScript.

Hier ein Arbeitsbeispiel: http://jsfiddle.net/LhSG9/1/

Answer 2

Ereignisblase. Sie müssen die e.target die angeklickt wurde.

Und wenn Sie nur versuchen, das Kontrollkästchen zu aktivieren/deaktivieren, sollten Sie die Option checked Eigentum.

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

EDIT: Einige Fehler korrigiert.

Arbeits-Demo: http://jsfiddle.net/LhSG9/

Answer 3

Sie müssen den Klick auf das Kontrollkästchen stoppen, damit es nicht in das Div hineinragt.

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

Answer 4

Wenn Sie auf das Kontrollkästchen klicken, klicken Sie auch auf das Div, da sich das Kontrollkästchen darin befindet. Was Sie also tun sollten, ist zu erfassen, wenn der Benutzer auf das Div, aber nicht auf das Kontrollkästchen klickt. Wenn der Benutzer auf das Kontrollkästchen klickt, wird es mit seinem Standardverhalten aktiviert/deaktiviert

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

Answer 5

Nehmen Sie die folgende Funktion in Ihre $(document).ready function -

Geben Sie Ihrem Kontrollkästchen eine ID, z. B. test.

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