click-Ereignis ausgelöst wird zweimal jquery

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

Klick auf die 200x200 div 'foo' funktioniert gut, und löst das click-Ereignis für das Kontrollkästchen drin.

Allerdings, wenn ich genau klicken Sie auf die checkbox selbst, es feuert die "normalen" Veranstaltung plus die jquery gebunden Veranstaltung über, die Bedeutung der checkbox prüft selbst, dann deaktiviert sich wieder.

Ist es eine gute Möglichkeit, dies zu verhindern?

  • Es sieht okay aus im IE und nicht im FF.
InformationsquelleAutor maxp | 2011-01-10
  1. 12

    Veranstaltungen Blase. Würden Sie brauchen, testen Sie die e.target, auf die geklickt wurde.

    Und wenn Sie nur versuchen zu aktivieren/deaktivieren Sie die box, dann sollten Sie seine checked Eigenschaft.

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

    EDIT: Gefixt ein paar Fehler.

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

    • +1 für beide mit Verkettung auf die bestehenden Selektor und die sehr knappe false form bind.
    • Danke, aber ich hatte zu ändern, weil false auch nicht ein preventDefault. :o(
    • Doh! Gut, deine neue Antwort, Kämpfe mit mir, so klar werde ich meine Stimme Weg. 🙂
    • Sorry @Phrogz. Ich war so damit beschäftigt, auf der Suche nach dem dummen Fehler in mir, die ich nicht sehen Ihre. BTW, sieht aus wie Sie einen ähnlichen Fehler, aber der Ansatz ist richtig, also +1 auf Ihre. :o)
    • Heh, ich war j/k -:). Sie erhalten immer noch eine Abstimmung und keine Entschuldigung nötig. Und du hast Recht, mir ist verbuggt. Löschen und hinzufügen von eine bessere Antwort 🙂
    InformationsquelleAutor user113716
  2. 13

    Wie wäre es damit: statt mit einem div, verwenden Sie eine <label>. Es ist mehr semantisch korrekt ist, tut genau das, was Sie wollen, und benötigt kein JavaScript.

    Beispiel hier: http://jsfiddle.net/LhSG9/1/

    • Definitiv der Weg zu gehen, wenn überhaupt möglich.
    InformationsquelleAutor Phrogz
  3. 11

    Sie anhalten müssen, klicken Sie auf die checkbox, damit es nicht Blase bis zu den div.

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

    Es geschieht, weil, wenn Sie klicken Sie auf das Kontrollkästchen, sind Sie auch bei Klick auf das div, da die checkbox ist drin. Also, was Sie tun sollten, ist zu erfassen, wenn der Benutzer auf die im div aber nicht das Ankreuzfeld. Wenn der Benutzer klicken Sie auf die checkbox handeln wird mit seinem default-Verhalten aktivieren/deaktivieren

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

    gehören die folgenden Funktion in yiur $(document).ready function -

    geben Sie eine id sagen test, um Ihre checkbox-dann - 

    $('#test').click(function(){
return false;
});
    InformationsquelleAutor Alpesh
Schreibe einen Kommentar