Question

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

我添加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之前添加图标时，它会像this一样出现。单击它时图标不执行任何操作。首先，如果我添加这样的删除图标，我将如何使图标与其对应的项目对齐？其次，为什么点击它时图标的点击事件没有被触发？

Answer 1

您只需向click元素添加#device-list事件侦听器，并将事件委托给button元素。在事件处理程序内部回调检查事件目标是span还是button。

这是一个例子，试图模仿你问题中的代码。

＆＃13;

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')
  }
})

＆＃13;

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

＆＃13;

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

＆＃13;

bootstrap list-group中的可单击按钮

1 个答案: