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 enter image description here

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








    
        My Name
        Date
        
            
            
                
                
                
                    Action

                    
                    Another action

                    
                    Something else here

                    
                    
                    Separated link

                    
                
            
        
    
    
        Some other Name
        Date
        
            
            
                
                
                
                    Action

                    
                    Another action

                    
                    Something else here

                    
                    
                    Separated link

                    
                
            
        
    


    
        
            
                
                 Table Row Modal

            
            
                Table row modal
            
            
                
                
            
        
        
    
    



    
        
            
                
                 split button modal

            
            
                split button modal

inki · Accepted Answer

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

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

Answers (1)

Related Questions