引導列表組中的可點擊按鈕

Question

我有一個列表組，其中包含按鈕形式的列表組。我想爲每個list-group-item添加可點擊的圖標，例如刪除按鈕。但是，向列表組項目添加圖標時，我可以將圖標添加到列表組項目或將其放在項目之前。當我添加圖標時，它會顯示爲this。點擊刪除圖標會觸發整個list-group-item的click事件，而不是delete圖標的click事件。

的Javascript，我添加列表組項和刪除圖標（按鈕）：

var button = $('<button/>').text(result[key].deviceId).addClass('list-group-item device').attr({name:result[key].deviceId, "aria-label": "Quick View Device", "data-toggle": "modal", "data-target": "#quick-view-device-modal", type: "button"}); 
var deviceName = result[key].deviceId; 
var deleteButton = $('<button/>').attr('type','button').attr('name','delete').attr('id',deviceName).html('<span class="glyphicon glyphicon-minus-sign red"></span>').addClass('icon delete-device'); 
button.prepend(deleteButton); 
$('#device-list').append(button); 

該代碼最終加入列表組項按鈕中刪除圖標按鈕，作爲一個孩子元件。我相信這就是爲什麼點擊刪除圖標按鈕會觸發整個list-group-item的click事件。正因爲如此，我嘗試另一種方式：

JavaScript來添加列表組項目之前刪除圖標：

var button = $('<button/>').text(result[key].deviceId).addClass('list-group-item device').attr({name:result[key].deviceId, "aria-label": "Quick View Device", "data-toggle": "modal", "data-target": "#quick-view-device-modal", type: "button"}); 
var deviceName = result[key].deviceId; 
var deleteButton = $('<button/>').attr('type','button').attr('name','delete').attr('id',deviceName).html('<span class="glyphicon glyphicon-minus-sign red"></span>').addClass('icon delete-device'); 
$('#device-list').append(button); 
$('button[name='+deviceName+']').before(deleteButton); 
$('.delete-device').hide(); 

當我每個列表組項前添加圖標，它出來像this 。當我點擊它時，圖標不起作用。 首先，如果我添加像這樣的刪除圖標，我將如何使圖標與其對應的項目對齊？其次，爲什麼點擊圖標時點擊事件不會被觸發？

Answer 1

您可以簡單地將click事件偵聽器添加到您的#device-list元素，並將事件委託給按鈕元素。在事件處理函數回調中，檢查事件目標是span還是button。

下面是一個例子，試圖模仿你的問題中的代碼。

var result = { 
 
    one: { deviceId: "dummy_one" }, 
 
    two: { deviceId: "dummy_two" }, 
 
    three: { deviceId: "dummy_three" } 
 
} 
 

 
var $deviceList = $('#device-list'); 
 
var $modal = $('#quick-view-device-modal'); 
 
var modalShowHndl = function (evt) { 
 
    var button = evt.data.relatedTarget; 
 
    $(this).find('.modal-title').html(button.text()) 
 
    $(this).find('.modal-body').html('<p>' + button.text() + '</p>') 
 
} 
 
var $relatedTarget; 
 

 
for (var key in result) { 
 
    var deviceName = result[key].deviceId; 
 
    var button = $('<button/>') 
 
    .text(' ' + deviceName) 
 
    .addClass('list-group-item device') 
 
    .attr({name:deviceName, 
 
     "aria-label": "Quick View Device", 
 
     "data-toggle": "modal", 
 
     type: "button"}); 
 

 
    var deleteButton = $('<span/>') 
 
    .attr({ 
 
    name: 'delete', 
 
    id: deviceName 
 
    }) 
 
    .addClass('icon delete-device glyphicon glyphicon-minus-sign red'); 
 

 
    button.prepend(deleteButton); 
 
    $deviceList.append(button); 
 
} 
 

 
$deviceList.on('click', 'button', function(evt) { 
 
    if($(evt.target).hasClass('glyphicon-minus-sign')) { 
 
    console.log('delete device:',evt.target.parentNode.textContent) 
 
    } else { 
 
    $relatedTarget = $(evt.target); 
 
    $modal.one('show.bs.modal', {relatedTarget: $relatedTarget}, modalShowHndl) 
 
    $modal.modal('show') 
 
    } 
 
})

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<ul class="list-group" id="device-list"></ul> 
 

 
<div id="quick-view-device-modal" class="modal fade" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>One fine body&hellip;</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal -->