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

Question

对不起这个标题，我找不到更好的描述方式。

我有一个列表组，希望按钮在激活时显示特定颜色。 但不知何故，嵌入的 span 捕获了点击并且似乎不算作 a 的一部分。

我该如何解决这个问题？ 我希望按钮改变颜色，无论我点击哪里(在 span 或其他任何地方)

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

谢谢

Answer 1

这是您的点击处理程序的修订代码。如果事件目标不是链接，则表示点击了子徽章。如果是这种情况，我们会找到最近的链接(父链接)并将其指定为目标。

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