Avoid dropdown menu close on click inside

Question

I have a Twitter Bootstrap dropdown menu. As all Twitter Bootstrap users know, the dropdown menu closes on click (even clicking inside it).

To avoid this, I can easily attach a click event handler on the dropdown menu and simply add the famous event.stopPropagation().

<ul class="nav navbar-nav">   <li class="dropdown mega-dropdown">     <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">       <i class="fa fa-list-alt"></i> Menu item 1       <span class="fa fa-chevron-down pull-right"></span>     </a>     <ul class="dropdown-menu mega-dropdown-menu">       <li>         <div id="carousel" class="carousel slide" data-ride="carousel">           <ol class="carousel-indicators">             <li data-slide-to="0" data-target="#carousel"></li>             <li class="active" data-slide-to="1" data-target="#carousel"></li>           </ol>           <div class="carousel-inner">             <div class="item">               <img alt="" class="img-rounded" src="img1.jpg">             </div>             <div class="item active">               <img alt="" class="img-rounded" src="img2.jpg">             </div>           </div>           <a data-slide="prev" role="button" href="#carousel"               class="left carousel-control">             <span class="glyphicon glyphicon-chevron-left"></span>           </a>           <a data-slide="next" role="button" href="#carousel"               class="right carousel-control">             <span class="glyphicon glyphicon-chevron-right"></span>           </a>         </div>       </li>     </ul>   </li> </ul> 

This looks easy and a very common behavior, however, and since carousel-controls (as well as carousel indicators) event handlers are delegated to the document object, the click event on these elements (prev/next controls, ...) will be “ignored”.

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){     // The event won't be propagated up to the document NODE and      // therefore delegated events won't be fired     event.stopPropagation(); }); 

Relying on Twitter Bootstrap dropdown hide/hidden events is not a solution for the following reasons:

• The provided event object for both event handlers does not give reference to the clicked element
• I don't have control over the dropdown menu content so adding a flag class or attribute is not possible

This fiddle is the normal behavior and this fiddle is with event.stopPropagation() added.

Update

Thanks to Roman for his answer. I also found an answer that you can find below.

Answer 1

This should help as well

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {   e.stopPropagation(); }); 

Answer 2

Removing the data attribute data-toggle="dropdown" and implementing the open/close of the dropdown can be a solution.

First by handling the click on the link to open/close the dropdown like this :

$('li.dropdown.mega-dropdown a').on('click', function (event) {     $(this).parent().toggleClass('open'); }); 

and then listening the clicks outside of the dropdown to close it like this :

$('body').on('click', function (e) {     if (!$('li.dropdown.mega-dropdown').is(e.target)          && $('li.dropdown.mega-dropdown').has(e.target).length === 0          && $('.open').has(e.target).length === 0     ) {         $('li.dropdown.mega-dropdown').removeClass('open');     } }); 

Here is the demo : http://jsfiddle.net/RomaLefrancois/hh81rhcm/2/