Javascript-Checkbox-Funktion arbeitet nur einmal

Question

Mit Bootstrap 3.3.6 JQuery 1.11.3

Ich bin mit einem kleinen Abschnitt ein Problem hat, speziell in Bezug auf die Auswahl und eine Checkbox, wenn der Benutzer klickt auf die Zeile deaktivieren.

jsfiddle hier: http://jsfiddle.net/0ogdt9s7/1/

html

<div id="not-working"> 
    <h3> 
    Click the text, then click the box 
    </h3> 
    <div class="selection-row" data-id="20"> 
    <div class="col-md-5">Data 20</div> 
    <div class="col-md-2"> 
     <input type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20"> 
    </div> 
    </div> 
    <div class="selection-row" data-id="22"> 
    <div class="col-md-5">Data 22</div> 
    <div class="col-md-2"> 
     <input type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22"> 
    </div> 
    </div> 
</div> 

js

$(document).ready(function() { 

    $(document).on("click", "div.selection-row", function() { 
    var $cb = $('input[type="checkbox"]', $(this)), is_on = $cb.prop('checked'); 
    if (is_on) { 
     //if its already checked, uncheck it 
     $cb.prop('checked', false); 
    } else { 
     //if its not checked, check it 
     $cb.prop('checked', true); 
    } 
    }); 
}); 

Die Zeilenauswahl funktioniert gut, aber wenn Sie in der Zeile auf das Kontrollkästchen klicken, wird der Kontrollkästchen ändert sich nicht. Wenn Sie auf "Daten" klicken, wird es korrekt geändert, aber das Kontrollkästchen macht nichts.

Wichtig zu beachten:

es in $(document).on() wohnen muss, weil dies in einem Pop-up ist, das durch AJAX angezeigt wird.

Ich nehme an, das ist etwas sehr einfaches, aber ich kann es einfach nicht finden. Jede Hilfe wird geschätzt.

Answer 1

Sie erhalten ein unerwartetes Ergebnis wegen der Bubbling phase.

die Bubbling-Phase eines Ereignis löst all Eltern des Elements, das nach oben auf das Ereignis von unten hören:

In Ihrem Fall, wenn der Benutzer das Kontrollkästchen erste Mal klickt, es ausgewählt wird . Dann findet die Blubbling-Phase statt und beginnt nach dem nächsten Elternteil zu suchen, der dem Ereignis zuhört. Wenn es welche gibt, wird sein Handler (Funktion) ausgeführt. Sie haben einen: selection-row.

Der Handler des .selection-row Elements stellt das Standardverhalten des Kontrollkästchens wieder her, so dass der Benutzer nichts getan hat.

Wenn Sie möchten, dass wenn der Benutzer auf die Data 20 oder die Data 22 klickt und das entsprechende Kontrollkästchen ausgewählt wird, müssen Sie kein Javascript verwenden.Ein label Element sollte lösen, dass:

<div class="selection-row" data-id="20"> 
    <div class="col-md-5"><label for="checkbox-20" >Data 20</label></div> 
    <div class="col-md-2"> 
     <input type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20"> 
    </div> 
    </div> 
    <div class="selection-row" data-id="22"> 
    <div class="col-md-5"><label for="checkbox-22">Data 22</label></div> 
    <div class="col-md-2"> 
     <input type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22"> 
    </div> 
    </div> 

Check it out: http://jsfiddle.net/0ogdt9s7/2/

Wie Sie sagten, dass Sie die gesamte Zeile müssen anklickbar sein, können Sie das ursprüngliche Ziel der Veranstaltung prüfen, ob (die innerste Element) ist die input und das Standardverhalten durch Unterbrechung der Handler mit einem return; seine Arbeit tun lassen:

$(document).on("click", "div.selection-row", function(e) { 
    if ($(e.target).is('input')) return; 

    var $cb = $('input[type="checkbox"]', $(this)), is_on = $cb.prop('checked'); 
    if (is_on) { 
     //if its already checked, uncheck it 
     $cb.prop('checked', false); 
    } else { 
     //if its not checked, check it 
     $cb.prop('checked', true); 
    } 
    }); 

prüfen diese Lösung: http://jsfiddle.net/0ogdt9s7/6/

Answer 2

Coworker löste es nur mit einem Ziel-Check:

http://jsfiddle.net/0ogdt9s7/4/

$(document).ready(function() { 
    $(document).on("click", ".selection-row", function(e) { 
    var $target = $(e.toElement); 
    if (!$target.is('input')) { 
     console.log($target); 
     var $cb = $('input[type="checkbox"]', $(this)), 
     is_on = $cb.is(':checked'); 
     if (is_on) { 
     //if its already checked, uncheck it 
     $cb.prop('checked', false); 
     } else { 
     //if its not checked, check it 
     $cb.prop('checked', true); 
     } 
    } 
    }); 
}); 

Wird diese offen halten für ein bisschen, um zu sehen, ob noch eine bessere Lösung

Answer 3

Sie das Element ändern könnten Sie auf Klicks auf den Text wie folgt lauschen:

$(".selector").click(function() { 
 
    $(this).parent().find(".chkbox").trigger("click"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="not-working"> 
 
    <h3> 
 
    Click the text, then click the box 
 
    </h3> 
 
    <div data-id="20"> 
 
    <div class="col-md-5 selector">Data 20</div> 
 
    <div class="col-md-2"> 
 
     <input class="chkbox" type="checkbox" name="selectedDudes[]" value="20" id="checkbox-20"> 
 
    </div> 
 
    </div> 
 
    <div data-id="22"> 
 
    <div class="col-md-5 selector">Data 22</div> 
 
    <div class="col-md-2"> 
 
     <input class="chkbox" type="checkbox" name="selectedDudes[]" value="22" id="checkbox-22"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

Ok hier ist ein schönes, sauberes Beispiel mit Bootstrap-Liste-Gruppe

$(".list-group-item").click(function(event) { 
    var target = $(event.target); 
    if (target.is("input")) { 
    $(this).trigger(click); 
    } else { 
    $(this).find(".chkbox").trigger("click"); 
    } 
}); 

<ul class="list-group"> 
    <li class="list-group-item"> 
    <input class="chkbox" type="checkbox"> Porta ac consectetur ac 
    </li> 
</ul> 

DEMO