Twitter bootstrap stop propagation on dropdown open

Question

I have a twitter bootstrap dropdown inside a div with the plugin jOrgChart.

The problem I'm having is that when I click the button to open the dropdown menu it also triggers a click event in the parent div that does a collapse of other elements.

This is my html:

<div id="chart">
<div class="node">
    <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Actions
        <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" style="text-align:left;">
            <li><a href="#">Edit</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
    </div>
</div>

<div class="node">
...
</div>

I want to prevent the click of a.dropdown-toggle from bubbling to div.node, I tried with this:

$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {
            e.stopPropagation();
        });

But now the dropdown isn't working.

EDIT

This is the concrete case: http://jsfiddle.net/UTYma/2/ (Thanks to Joe Tuskan for starting the fiddle)

Joe · Accepted Answer · 2012-09-07T19:30:22.493

21

$("#orgchart").jOrgChart({ chartElement: '#chart' });

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
    e.stopPropagation();
    $('.dropdown-menu').toggle();
});

Stop Propagation then toggle. Example

I had to add the drop down menu items to the click handler to keep the behavior constant.

edited Sep 07 '12 at 19:30

answered Sep 07 '12 at 18:43

Joe

80,724
18
127
145

http://jsfiddle.net/UTYma/ can you edit that, because I'm not sure what you are trying to do. – Joe Sep 07 '12 at 18:59
I edited it, the div#chart was missing, you can check now that the dropdown isn't working – Escobar5 Sep 07 '12 at 19:03
Got it working with your edit, hope it fits into your solution. – Joe Sep 07 '12 at 19:30
This worked for me: http://stackoverflow.com/questions/11617048/twitter-bootstrap-stop-just-one-dropdown-toggle-from-closing-on-click – Felix Aballi May 28 '14 at 16:09
4

One downside to this solution is that calling toggle() on the dropdown misses out some functionality you get with the original click event handler - such as setting up ability to close the dropdown by clicking anywhere on the screen – Simon Green Jan 05 '15 at 12:47
1

imho, @Sebastian.Belczyk answer is better since it avoids the downside mentioned above. – Billybobbonnet Aug 27 '15 at 13:41
After closing the dropdown it doesn't open again – Guilherme Flores Sep 15 '21 at 13:54

Sebastian.Belczyk · Answer 2 · 2012-09-07T18:48:30.897

4

Try something like this:

$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) {

            e.isDropDownToggleEvent =true;
})

Then:

$("div.node").click(function (e) {
     if (e.isDropDownToggleEvent != null && e.isDropDownToggleEvent)
         return false;

     return true;      
})

You can also try to put e.preventDefault() or e.stopPropagation(); instead of return false.

edited Sep 07 '12 at 18:48

answered Sep 07 '12 at 18:39

Sebastian.Belczyk

875
8
16

The thing is, with stopPropagation I'm already stopping event bubbling, the problem I have is that now the dropdown doesn't work either. – Escobar5 Sep 07 '12 at 18:41
I realized that a few seconds ago I updated my answer. The basic idea is to detect when it's click event that bubbled from toggle drop down and done work accordingly. – Sebastian.Belczyk Sep 07 '12 at 18:51
2

That didn't worked for me, event didn't had the new property. It was a different event (firefox and chrome). – Menelaos Vergis Nov 04 '15 at 08:56
@Menelaos try `e.originalEvent.isDropDownToggleEvent` instead (assuming you are using jQuery) – Dunc Apr 12 '18 at 12:24
@Dunc Thank you for the reply, I would do what you propose if i could remember for what project this was for :) – Menelaos Vergis Apr 13 '18 at 16:26

score 1 · Answer 3 · answered Jul 14 '15 at 10:30

1

I used

$('.multiselect').on('click', function (e) {
    $(this).next('.dropdown-menu').toggle();
    e.stopPropagation();
});

This is similar to @Joe's answer, but a bit more generic

answered Jul 14 '15 at 10:30

thelem

2,642
1
24
34

score 1 · Answer 4 · answered May 24 '16 at 06:56

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
    e.stopPropagation();
    $(this).closest('.dropdown').toggleClass('open');
});

You should use this instead as above solution doesn't close the dropdown on focus out.

score 1 · Answer 5 · answered Sep 04 '18 at 16:27

Building on Joe's answer, this includes the normal dropdown functionality of closing on the next click.

$("#orgchart").jOrgChart({ chartElement: '#chart' });

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click((e) => {
    e.stopPropagation();
    $('.dropdown-menu').toggle();

    // close on next click only
    $(window).one("click", () => $('.dropdown-menu').toggle());
});

score 0 · Answer 6 · answered Sep 07 '12 at 19:02

0

If I understand correctly, you want to avoid closing menu.

$("div#chart .dropdown-menu li").bind('click',function (e) {
            e.stopPropagation();
        },false);

answered Sep 07 '12 at 19:02

Luca Rainone

16,138
2
38
52

No, I want the menu to work normally, I just want that when the user clicks the button to open the menu, the event doesn't bubble (Because the div that contains the menu has also an event to collapse another elements) – Escobar5 Sep 07 '12 at 19:04
To be clear, I'm using jOrgChart, and I have the menu inside a node: http://dl.dropbox.com/u/4151695/html/jOrgChart/example/example.html – Escobar5 Sep 07 '12 at 19:05

Twitter bootstrap stop propagation on dropdown open

6 Answers6

Linked