javascript - Bootstrap Split button drop down: programmatic access to prevent overlapped click events -
i have table has on click event per row open modal, , looking create column of actions in table split buttons using bootstrap 
the issue tr click events interfering split button click events
click on table row, see table row modal click on action button, see separate action modal however, click on split group button's drop down, opens drop down , opens table row modal
the reason due overlapping onclick functions click events on overlapping items
the action button onclick used have issue well, added onclick stop propagation button, preventing overlay clicks occuring
onclick="$('#dd-modal').modal('show');event.stoppropagation();" so solves button issue, dropdown of button , cannot figure out how programmatically show dropdown without triggering tr onclick event
i think
.trigger('click.bs.dropdown'); may have it, unsure on how implement
thanks help
$(document).ready(function () { $("#table").on("click", "tr", function () { $('#tr-modal').modal({ backdrop: 'static', keyboard: false }); }); }); function opener() { $('#dd-modal').modal('show'); }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <table id="table" class="table table-striped"> <tr> <td>my name</td> <td>date</td> <td> <!-- split button --> <div class="btn-group"> <button type="button" class="btn btn-danger" onclick="$('#dd-modal').modal('show');event.stoppropagation();">action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">toggle dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">separated link</a> </li> </ul> </div> </td> </tr> <tr> <td>some other name</td> <td>date</td> <td> <!-- split button --> <div class="btn-group"> <button type="button" class="btn btn-success" onclick="$('#dd-modal').modal('show');event.stoppropagation();">action</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">toggle dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">action</a> </li> <li><a href="#">another action</a> </li> <li><a href="#">something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">separated link</a> </li> </ul> </div> </td> </tr> </table> <div class="modal fade" id="tr-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title">table row modal</h4> </div> <div class="modal-body"> <p>table row modal</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">dismiss</button> <button type="button" class="btn btn-primary">ok!</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <div class="modal fade" id="dd-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title">split button modal</h4> </div> <div class="modal-body"> <p>split button modal</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">dismiss</button> <button type="button" class="btn btn-primary">ok!</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal -->
you can quick check tagname of target , ignore if it's button or if parent button (this in case happen click in "span" caret icon) around issue pretty quickly.
wrap modal opening call if statement checking target type...
$("#table").on("click", "tr", function (e) { if (e.target.tagname !== "button" && e.target.parentelement.tagname !== "button") { $('#tr-modal').modal({ backdrop: 'static', keyboard: false }); } } replace contents of document ready js that
note: take note of event paremeter in first line
function (e) 
Comments
Post a Comment