title: Bootstrap dropdown item binding with Ajax source
body: <p>I have Bootstrap dropdown button, I want get data when user click this dropdown button instead of I need load country list at page loading time, here is my code;</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
  &lt;input class="text-box single-line" data-val="true" data-val-required="The Country field   is required." id="Country" name="Country" type="text" value="US" /&gt;
  &lt;a class="btn dropdown-toggle country" id="country" data-toggle="dropdown"&gt;
  &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;ul class="dropdown-menu countrys" role="menu" aria-labelledby="dropdownMenu"&gt;
     //store country list
  &lt;/ul&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>I click dropdown button, it can't trigger jquery work, it seems Bootstrap don't allow custom dropdown function.</p>
  
  <pre><code>$(document).ready(function () {
          $('#country').click(function () {
              // Only call notifications when opening the dropdown
              if (!$(this).hasClass('open')) {
                  $.ajax({
                      type: "GET",
                      url: "/getCountries",
                      async: false,
                      dataType: "script"
                  });
              }
          });
      });
  </code></pre>