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/