title: Click event not executed on bootstrap dropdown list item link click
body: <p>I have multiple dropdowns (more than 10), and my click method never executes... 
  Is it possible to define same click method to all dropdown elements like I have done below?</p>
  
  <p>JS</p>
  
  <pre><code>&lt;link rel="stylesheet" href="Scripts/bootstrap/css/bootstrap.min.css" /&gt;
  &lt;script src="Scripts/jquery-2.1.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="Scripts/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
  
          $(".dropdown-menu li a").click(function () {
  
              console.log("inside"); //this never executes...
  
              var type = $(this).data("type");
              var nick = $(this).data("nickname");
  
              if (type == "1") {
                  $('#chat_text').val('!tip ' + nick + ' ').focus();
              }
              else if (type == "2") {
  
              }
              else if (type == "3") {
                  var val = $('#chat_text').val();
                  $('#chat_text').val(val + nick ).focus();
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;li class="dropdown"&gt;
     &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;Test1&lt;/a&gt;
     &lt;ul class="dropdown-menu" role="menu"&gt; 
     &lt;li&gt;&lt;a href="#" data-type="1" data-nickname="Test1"&gt;Tip&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="#" data-type="2" data-nickname="Test1"&gt;Show&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="#" data-type="3" data-nickname="Test1"&gt;Paste&lt;/a&gt;&lt;/li&gt; 
     &lt;/ul&gt; 
     &lt;span&gt;Some text&lt;/span&gt;
  &lt;/li&gt;
  
  &lt;li class="dropdown"&gt;
     &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;Test2&lt;/a&gt;
     &lt;ul class="dropdown-menu" role="menu"&gt; 
     &lt;li&gt;&lt;a href="#" data-type="1" data-nickname="Test2"&gt;Tip&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="#" data-type="2" data-nickname="Test2"&gt;Show&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="#" data-type="3" data-nickname="Test2"&gt;Paste&lt;/a&gt;&lt;/li&gt; 
     &lt;/ul&gt; 
     &lt;span&gt;Some text&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>More of this dropdowns are in real code....</p>
  
  <p>*EDIT: I forgot to mention that I add these dropdowns dynamically after the page is created (AJAX calls....) </p>