title: Dynamic dropdown menu with bootstrap not working
body: <p>I have been using bootstrap for a while, and I came across an issue when trying to add a dropdown menu dynamically.</p>
  
  <p>This is the JavaScript that I have:</p>
  
  <pre><code>$(document).ready(function() {
   $("#clickHere").click(function(){
          $("#appendHere").html("&lt;div class=\"dropdown\" style=\"display:inline;\"&gt;&lt;a id=\"drop1\" href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"&gt;&lt;b class=\"caret\"&gt;&lt;/b&gt;&lt;/a&gt;&lt;ul class=\"dropdown-menu pull-left\"&gt;&lt;li&gt;&lt;button&gt;Analyse Now&lt;/button&gt;&lt;/li&gt;&lt;li class=\"divider\"&gt;&lt;/li&gt;&lt;li&gt;&lt;button&gt;Analyse Later&lt;/button&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;");
   });
  
   $('#drop1').on('click', function(e){
    e.stopPropagation();
    $(".dropdown-toggle").dropdown('toggle');
   });
  });
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;"&gt;
      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li class="dropdown-submenu pull-left"&gt; &lt;a tabindex="-1" href="#"&gt;More options&lt;/a&gt;
          &lt;ul class="dropdown-menu" id="mainMenu"&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a tabindex="-1" href="#"&gt;Second level link&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;button id="clickHere"&gt;Click here &lt;/button&gt;
  &lt;div id="appendHere"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Here is the fiddle
  <a href="http://jsfiddle.net/szx4Y/83/" rel="nofollow">http://jsfiddle.net/szx4Y/83/</a></p>
  
  <p>The dropdown added dynamically does not work properly. I have managed to make it work in my code, but it only appears once anyway. </p>
  
  <p>Can anyone help me out?</p>
  
  <p>Thanks!</p>