Bootstrap List-Elemente aktivieren auf eingebetteten Bereich

Question

Sorry für den Titel, fand ich keine bessere Möglichkeit, es zu beschreiben.

Ich habe eine Liste-Gruppe und möchte, dass die Schaltflächen eine bestimmte Farbe zeigen, wenn aktiv. aber irgendwie fangen die eingebetteten Bereiche den Klick ein und scheinen nicht als Teil der a zu zählen.

Wie kann ich das beheben? Ich möchte die Schaltfläche Farbe ändern, egal, wo ich (auf Spanne oder anderswo) klicken

Der Code ist hier: https://jsfiddle.net/zj6uwmvu/

dank

Answer 1

Hier ist der überarbeitete Code für Ihre Click-Handler. Wenn das Ereignisziel kein Link ist, bedeutet dies, dass auf das Kinder-Badge geklickt wurde. Wenn dies der Fall ist, finden wir den nächsten Link (den übergeordneten) und weisen ihn als Ziel zu.

$('.location').find('.location-picker-list .list-group-item').on('click', function(e) { 
    var target = $(event.target); 
    if (!target.is('a')) { 
     target = target.parent('a') 
    } 

    e.preventDefault() 
    target.closest('.list-group').children(".active").removeClass('active') 
    target.addClass('active') 
}) 

https://jsfiddle.net/zj6uwmvu/11/

Answer 2

stattdessen das Element des Erhaltens von „a“ Versuchen Sie es mit seiner Klasse wie folgt:

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover{ 
      background-color: red; //instead of red put the color that you want. 
}