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)
To stop an event from further propagation in the capturing and bubbling phases, you call the Event. stopPropation() method in the event handler. Note that the event. stopPropagation() method doesn't stop any default behaviors of the element e.g., link click, checkbox checked.
For Bootstrap 4, look for the clickEvent , and when found in the hide event, prevent the default close behavior. This dropdown will only close when the button is clicked. In some cases, you may want the Dropdown to close when the button or menu is clicked. In this case you can examine the clickEvent target.
Set toggle={false} property inside DropdownItem to prevent dropdown from closing.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.
$("#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
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With