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

Question

抱歉，标题找不到更好的描述方式。

我有一个列表组，希望按钮在活动时显示特定的颜色。 但不知何故，嵌入式跨度捕获点击，似乎不能算作该部分a 。

我怎样才能解决这个问题？ 无论我在哪里单击（跨度或其他任何位置），我都希望按钮更改颜色

代码在这里： https : //jsfiddle.net/zj6uwmvu/

谢谢

Answer 1

而不是通过“ a”获取项目，请尝试按如下所示的类别进行获取：

.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

这是您的点击处理程序的修改后的代码。 如果事件目标不是链接，则表示已单击子徽章。 在这种情况下，我们找到最接近的链接（父链接）并将其分配为目标。

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