启动列表组中的可点击按钮

Clickable button within bootstrap list-group

本文关键字：按钮 列表 启动      更新时间：2023-09-26

我有一个list-group，其中包含list-group-items(按钮形式)。我想添加可点击的图标，每个列表组项，例如删除按钮。但是，在向list-group-item添加图标时，我既可以将图标置于list-group-item之前，也可以将其置于该项之前。当我把图标加在前面时，结果是这样的。单击删除图标会触发整个list-group-item的单击事件，而不是删除图标的单击事件。

Javascript，我添加了list-group-items和delete图标(按钮):

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按钮中添加了删除图标按钮，作为子元素。我相信这就是为什么单击delete图标按钮会触发整个list-group-item的单击事件。正因为如此，我尝试了另一种方法:

Javascript在list-group-item前添加delete图标:

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前添加图标时，结果是这样的。当我点击图标时，它什么也不做。首先，如果我像这样添加删除图标，我如何使图标与它对应的项目对齐?其次，当我点击图标时，为什么图标的点击事件没有被触发?

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

相关文章：