javascript - 引导列表组中的可单击按钮

我有一个带有按钮形式的列表组项目的列表组。我想将可点击图标添加到每个列表组项目，例如删除按钮。但是，在将图标添加到列表组项目时，我可以将图标放在列表组项目之前，也可以将其放在项目之前。当我添加图标时，它像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);

该代码最终将在列表组项按钮中添加删除图标按钮作为子元素。我相信这就是为什么单击删除图标按钮会触发整个列表组项目的点击事件的原因。因此，我尝试了另一种方法：

用于在列表组项目之前添加删除图标的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一样出现。单击该图标不会执行任何操作。
首先，如果我像这样添加删除图标，如何使图标与其对应的项目对齐？其次，为什么单击图标时未触发该图标的单击事件？

最佳答案

您可以简单地将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 -->