title: jQuery method called twice?
body: <p>So I have a nested bootstrap dropdown in my navbar. Here is the code that prevents the dropdown on click of a nested drop to execute its normal task. This works well.</p>
  
  <pre><code>(function($) {
      $(document).ready(function() {
  
          $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
              event.preventDefault();
              event.stopPropagation();
              $(this).parent().siblings().removeClass('open');
              $(this).parent().toggleClass('open');
          });
      });
  })(jQuery);
  </code></pre>
  
  <p>In this code, <code>onclick</code> of the dropdown's <code>&lt;li&gt;</code> does something. When the click is on a normal <code>li</code> of the dropdown it works fine but when it is in a nested dropdown's li the function is executed but when it ends it is executed again (the onClick). The way I've found to avoid that its complete seconde execution is I check in my if statement <code>if</code> <code>$(this)</code> (the clicked <code>li</code>) is <code>null</code>, which it is when it's executed the second time out of nowhere. This way is pretty gross but it works, but does anyone see why the method is called a second time and how to stop it from getting called twice?</p>
  
  <pre><code>$("#dropdownViewModeSelect").on('click', 'li', function() {
  
      selectedViewMode = $(this).attr("viewmode");
  
      if (selectedViewMode != "undefined" &amp;&amp; selectedViewMode != null) 
      {
          if (selectedViewMode != previouslySelectedViewMode || currentTimelineMode != previouslySelectedTimelineMode) 
          {
              //Remove glyphicons to all i
              var touslesideslis = $("#dropdownViewModeSelect li").find("i").removeClass('glyphicon glyphicon-ok');
              //Add glyphicons to clicked i
              $(this).find("i").addClass('glyphicon glyphicon-ok');
              //Add text to button
              currentViewModeSecondary = $(this).attr("viewmodesecondary");
              var textBtn;
              if (currentViewModeSecondary != "classic")
                  textBtn = "Ligne du temps - " + $(this).text();
              else
                  textBtn = $(this).text();
  
              $("#dropdownMenuViewMode").text(textBtn);
              $("#dropdownMenuViewMode").append('&lt;span class="glyphicon glyphicon-eye-open pull-left"&gt;&lt;/span&gt;');
              $("#dropdownMenuViewMode").append('&lt;span class="caret caret-filter"&gt;&lt;/span&gt;');
              if ($(window).width() &gt;= 768)
                  Global.Responsiveness();
          }
      }
  
  });
  </code></pre>
  
  <p>Here's my HTML for the dropdown.</p>
  
  <pre><code>&lt;li class="dropdown"&gt; &lt;a class="dropdown-toggle" id="dropdownMenuViewMode" data-toggle="dropdown" role="button" aria-expanded="false"&gt;&lt;span class="glyphicon glyphicon-eye-open pull-left"&gt;&lt;/span&gt;Jour&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
  &lt;ul class="dropdown-menu" id="dropdownViewModeSelect" role="menu"&gt;
      &lt;li viewmode="jour" viewmodesecondary="classic"&gt;&lt;a id="linkJour"&gt;Jour&lt;i class='dropdownFiltreImage glyphicon glyphicon-ok'&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li viewmode="ressource" viewmodesecondary="classic"&gt;&lt;a id="linkRessource"&gt;Ressources/Jour&lt;i class='dropdownFiltreImage'&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li viewmode="week" viewmodesecondary="classic"&gt;&lt;a id="linkSemaine"&gt;Semaine&lt;i class='dropdownFiltreImage'&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li viewmode="month" viewmodesecondary="classic"&gt;&lt;a id="linkMois"&gt;Mois&lt;i class='dropdownFiltreImage'&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li viewmode="year" viewmodesecondary="classic"&gt;&lt;a id="linkAnnee"&gt;Année&lt;i class='dropdownFiltreImage'&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li viewmode="agenda" viewmodesecondary="classic"&gt;&lt;a id="linkAgenda"&gt;Agenda&lt;i class='dropdownFiltreImage'&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="dropdown dropdown-submenu"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Ligne du temps&lt;/a&gt;
  
          &lt;ul class="dropdown-menu"&gt;
              &lt;li viewmode="timeline" viewmodesecondary="timeline"&gt;&lt;a id="linkTimelineDay"&gt;Jour&lt;i class='dropdownFiltreImage'&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li viewmode="timeline" viewmodesecondary="timeline"&gt;&lt;a id="linkTimelineWeek"&gt;Semaine&lt;i class='dropdownFiltreImage'&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li viewmode="timeline" viewmodesecondary="timeline"&gt;&lt;a id="linkTimelineMonth"&gt;Mois&lt;i class='dropdownFiltreImage'&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></li></p>