Dropdown click events

by cent cent

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
  <ul class="nav navbar-nav">
    <li class="dropdown mega-dropdown ">
      <a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle">
        <i class="fa fa-"></i> Menu item 1
        <span class="fa fa-chevron-down pull-right"></span>
      </a>

      <ul class="dropdown-menu mega-dropdown-menu">
      <!--<form> solution 6: works!-->
        <li>
          <div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li class="" 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="//placehold.it/360x240/&text=Hello" />
              </div>
              <div class="item active">
                <img alt="" class="img-rounded" src="//placehold.it/360x240/&text=World" />
              </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>
        <!--</form> solution 6: works!-->
      </ul>
    </li>
  </ul>
</body>

CSS

body {
  height: 800px;
}

JavaScript

// solution 1: Works!
// drop 'data-toggle="dropdown"' in 'class="dropdown-toggle"'
/*$('li.dropdown.mega-dropdown a').on('click', function(event) {
  $(this).parent().toggleClass("open");
});

$('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');
  }
});*/
// solution 2: Fails!
/*$('.dropdown-menu').on("click.bs.dropdown", function(e) {
  e.stopPropagation(); e.preventDefault(); 
});*/
// solution 3: Fails!
/*$(document).on('click', '.dropdown .dropdown-menu', function(e) {
  e.stopPropagation();
});*/
// solution 4: Fails!
/*$('.dropdown').on('hide.bs.dropdown', function (e) {
    var target = $(e.target);
    if(target.parents(".dropdown-menu").length){
        return false;
    }else{
        return true;
    }
});*/
// solution 5: works!
// add 'data-toggle="dropdown"' in 'class="dropdown-toggle"'
$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    var events = $._data(document, 'events') || {};
    events = events.click || [];
    for(var i = 0; i < events.length; i++) {
        if(events[i].selector) {

            //Check if the clicked element matches the event selector
            if($(event.target).is(events[i].selector)) {
                events[i].handler.call(event.target, event);
            }

            // Check if any of the clicked element parents matches the 
            // delegated event selector (Emulating propagation)
            $(event.target).parents(events[i].selector).each(function(){
                events[i].handler.call(this, event);
            });
        }
    }
    event.stopPropagation(); //Always stop propagation
});
// solution 6: works!
// surround '<li>' with '<form>...</form>'
// solution 7: almost there!
/*$(document).on('hide.bs.dropdown', function (e) {
  if...