Bootstrap Split button drop down: programmatic access to prevent overlapped click events

Question

I have a table that has an on click event per row to open a modal, and am looking to create a column of actions in the table for some split buttons using bootstrap

the issue is that the tr click events are interfering with the split button click events

here is my demo

Click on a table row, you will see the table row modal Click on the action button, you will see the separate action modal However, click on the split group button's drop down, it opens the drop down AND opens the table row modal

The reason is due to overlapping onclick functions Click events on overlapping items

The action button onclick used to have this issue as well, so I added an onclick stop propagation to the button, preventing overlay clicks from occuring

 onclick="$('#dd-modal').modal('show');event.stopPropagation();" 

So that solves my button issue, but my dropdown of the button , I cannot figure out how to programmatically show the dropdown without triggering the tr onclick event

I think that

.trigger('click.bs.dropdown');

may have something to do with it, but unsure on how to implement

Thanks for any 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">&times;</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">&times;</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 -->

Answer 1

You can do a quick check for the tagName of the target and ignore if it's a button or if the parent is a button (this is in case you happen to click in the "span" for the caret icon) to get around this issue pretty quickly.

Wrap you modal opening call with this if statement checking the 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 the contents of your document ready js with that

note: take note of the event paremeter in the first line

function (e)

Working Demo