bootstrap list-group中的可單擊按鈕

Question

我有一個列表組，其中包含按鈕形式的list-group-items。 我想為每個list-group-item添加可點擊的圖標，例如刪除按鈕。 但是，當向list-group-item添加圖標時，我可以將圖標添加到list-group-item或將其放在該項之前。 當我添加圖標時，它會像這樣出現 。 單擊刪除圖標會觸發整個列表組項的單擊事件，而不是刪除圖標的單擊事件。

我在其中添加list-group-items和刪除圖標（按鈕）的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按鈕中的刪除圖標按鈕添加為子元素。 我相信這就是為什么單擊刪除圖標按鈕會觸發整個list-group-item的click事件。 因此，我嘗試了另一種方式：

用於在list-group-item之前添加刪除圖標的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();

當我在每個list-group-item之前添加圖標時，它會像這樣出現 。 單擊它時圖標不執行任何操作。 首先，如果我添加這樣的刪除圖標，我將如何使圖標與其對應的項目對齊？ 其次，為什么點擊它時圖標的點擊事件沒有被觸發？

Answer 1

您只需向您的#device-list元素添加一個click事件監聽#device-list ，並將該事件委托給button元素。 在事件處理程序內部回調檢查事件目標是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 -->