title: Bootstrap dropdown menu on click
body: <p>I am trying to create a dynamic Bootstrap dropdown button when the page load using this function</p>
  
  <pre><code>function loadPage(){
  
    var fType = $('&lt;div class="btn-group" style="padding: 5px; width: 100%;"&gt;&lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="width:100%"&gt;Category&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;&lt;ul class="dropdown-menu" role="menu"&gt;&lt;li&gt;&lt;a href="#" id="act1"&gt;Action&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#" id="act2"&gt;Action 2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;');
    $("#col1").append(fType);
  
  }
  </code></pre>
  
  <p>But when I try to add onclick event on one of the options it doesn't work! This is my javascript</p>
  
  <pre><code>    $('#act1').click(function(e) {
         e.preventDefault();
         alert('alerted');
  });
  </code></pre>
  
  <p>Thanks.</p>