Bootstrap列表项在嵌入式跨度上激活

Question

Sorry for the title, I found no better way to describe it.

I have a list-group and want the buttons to show a specific color when active. but somehow, the embedded spans capture the click and seem to not count as part of the a .

how can I fix this? I want the button to change color, no matter where I click (on span or anywhere else)

The code is here: https://jsfiddle.net/zj6uwmvu/

thanks

Answer 1

instead of getting the item by "a", try getting it by its class like this:

.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.
}

Answer 2

Here is the revised code for your click handler. If the event target is not a link, it means that the child badge was clicked. If this is the case, we find the closest link (the parent) and assign it as the target.

$('.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/