twitter bootstrap动态添加下拉列表

Question

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 <ul> which is hidden but should show up if the notification item is clicked.

I have a couple of working dropdowns with Bootstrap on my page, so that's not the problem.

The loading and creating of the elements works fine. They appear in the DOM if i check with Firebug.

// this is in the top bar
<a id="notifications" href="/user/profile/notifications" data-toggle="notifications-alert">Benachrichtigungen</a>

// and this appended to the end of body
<ul id="notifications-alert" class="notifications dropdown-menu" style="display: none;">
    <li class="event_new">[..]</li>
    <li class="event_new">[..]</li>
</ul>

I also initialize the dropdown() when i append set the data-toggle attribute. Like this:

$notifications.addAttr('data.toggle', 'notifications-alert')
              .dropdown();

I also tried with a manual trigger but still doesent work.

$notifications.addAttr('data.toggle', 'notifications-alert')
              .click(function(e) { e.preventDefault(); $(this).dropdown('toggle'); })
              .dropdown();

Any ideas why it is not working?

@EDIT: my mistake, solved. See my answer for details.

Answer 1

All examples in twitter bootstrap shows both the link [tag a] and the dropdown [tag ul] together with the same parent. Maybe the easy solution is that you should add the ul after the a instead of adding the ul in the end of the body $('a selector').after(ul)