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

Question

我有一个列表组，其中包含按钮形式的列表组项。我想为每个列表组项添加可点击的图标，例如删除按钮。但是，在将图标添加到列表组项时，我可以将图标添加到列表组项或将其放在项目之前。当我添加图标时，它会像this 一样出现。单击删除图标会触发整个列表组项的单击事件，而不是删除图标的单击事件。

我在其中添加列表组项和删除图标（按钮）的 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 之前添加删除图标的 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 -->