title: twitter bootstrap dynamically add dropdown
body: <p>I'm implementing a user notification system. When the page is loaded an AJAX request is made and if notifications exist, they are rendered into a <code>&lt;ul&gt;</code> which is hidden but should show up if the notification item is clicked.</p>
  
  <p>I have a couple of working dropdowns with Bootstrap on my page, so that's not the problem.</p>
  
  <p>The loading and creating of the elements works fine. They appear in the DOM if i check with Firebug.</p>
  
  <pre><code>// this is in the top bar
  &lt;a id="notifications" href="/user/profile/notifications" data-toggle="notifications-alert"&gt;Benachrichtigungen&lt;/a&gt;
  
  // and this appended to the end of body
  &lt;ul id="notifications-alert" class="notifications dropdown-menu" style="display: none;"&gt;
      &lt;li class="event_new"&gt;[..]&lt;/li&gt;
      &lt;li class="event_new"&gt;[..]&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I also initialize the dropdown() when i append set the <code>data-toggle</code> attribute. Like this:</p>
  
  <pre><code>$notifications.addAttr('data.toggle', 'notifications-alert')
                .dropdown();
  </code></pre>
  
  <p>I also tried with a manual trigger but still doesent work. </p>
  
  <pre><code>$notifications.addAttr('data.toggle', 'notifications-alert')
                .click(function(e) { e.preventDefault(); $(this).dropdown('toggle'); })
                .dropdown();
  </code></pre>
  
  <p>Any ideas why it is not working?</p>
  
  <p>@EDIT: my mistake, solved. See my answer for details.</p>