ブートストラップリストグループ内のクリック可能なボタン

Question

私はボタングループの中にリストグループ項目を持つリストグループを持っています。それぞれのリストグループ項目にクリック可能なアイコンを追加したいと思います。例えば、ボタンを削除します。しかし、list-group-itemにアイコンを追加するときは、そのアイコンをlist-group-itemの前に追加するか、itemの前に置くことができます。アイコンを前に付けると、thisのようになります。削除アイコンをクリックすると、削除アイコンのクリックイベントではなく、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'); 
button.prepend(deleteButton); 
$('#device-list').append(button); 

このコードは、子として、リスト・グループ項目ボタン内の削除アイコンボタンを追加して終わります素子。私はアイコン削除ボタンをクリックすると、list-group-item全体のクリックイベントがトリガーされるのではないかと考えています。

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のように出てくる：リストグループ項目の前にアイコンを削除して追加するための

Javascriptを：このため、私は別の方法を試してみました。クリックするとアイコンは何もしません。 まず、このような削除アイコンを追加すると、それに対応するアイテムとアイコンの並びをどのようにするのですか？次に、アイコンをクリックしたときにアイコンのクリックイベントがトリガーされないのはなぜですか？

Answer 1

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