cliquez sur événement déclenché deux fois - jquery

J'ai l'simplifiée suivante 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>

Cliquant sur le 200x200 div 'foo' fonctionne bien, et déclenche l'événement click pour la case à cocher à l'intérieur.

Cependant quand j'ai exactement cliquez sur la case à cocher lui-même, il déclenche son "normales" de l'événement, plus le jquery lié événement ci-dessus, la signification de la case vérifie lui-même, puis décoche une fois de plus.

Est-il un bon moyen pour éviter cela?

Il semble correct sous IE, et pas dans FF.

OriginalL'auteur maxp | 2011-01-10

  1. 12

    Événements de la bulle. Vous devez tester le e.target qui a été cliqué.

    Et si vous essayez simplement de cocher/décocher la case, vous devez définir son checked propriété.

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

    EDIT: Corrigé quelques erreurs.

    De travail de démonstration: http://jsfiddle.net/LhSG9/

    +1 pour les deux à l'aide de chaînage sur le sélecteur et le très laconique false forme de bind.
    Merci, mais j'ai dû changer parce que le false également un preventDefault. :o(
    Doh! Eh bien, votre nouvelle réponse se bat avec le mien, c'est clair que je vais prendre mon vote loin. 🙂
    Désolé @Phrogz. J'étais tellement occupé à essayer de trouver le bug stupide dans la mienne que je ne voyais pas la vôtre. BTW, on dirait que vous avez un bug similaire, mais la démarche est la bonne, donc +1 sur le vôtre. :o)
    Heh, j'ai été j/k :). Vous obtenez toujours un vote, et pas d'excuses nécessaire. Et vous avez raison, la mienne est buggé. La suppression et l'ajout d'une meilleure réponse 🙂

    OriginalL'auteur user113716

  2. 13

    Comment à ce sujet: au lieu d'utiliser un div, utiliser un <label>. C'est plus sémantiquement correct, fait exactement ce que vous voulez, et ne nécessite pas de JavaScript.

    Exemple ici: http://jsfiddle.net/LhSG9/1/

    Certainement le chemin à parcourir, si possible.

    OriginalL'auteur Phrogz

  3. 11

    Vous avez besoin d'arrêter l', cliquez sur la case afin de ne pas remonter jusqu'à la div.

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

    OriginalL'auteur Josiah Ruddell

  4. 2

    Cela arrive parce que quand vous cliquez sur la case à cocher, vous êtes également en cliquant sur le div, car la case est à l'intérieur. Donc, ce que vous devez faire est de capturer lorsque l'utilisateur clique sur l'intérieur de la div mais pas de la case. Si l'utilisateur clique sur la case, il agira avec son comportement par défaut en cochant/décochant

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

    OriginalL'auteur amosrivera

  5. 1

    inclure la fonction suivante dans yiur $(document).ready function -

    donner une id de dire test à votre case, puis - 

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

    OriginalL'auteur Alpesh