引导列表组中的可点击按钮

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 -->