javascript - twitter bootstrap 动态添加下拉菜单

Question

我正在实现一个用户通知系统。加载页面时，会发出 AJAX 请求，如果存在通知，则会将它们呈现到 <ul> 中。它是隐藏的，但如果单击通知项目，应该会显示。

我的页面上有几个使用 Bootstrap 运行的下拉菜单，所以这不是问题。

元素的加载和创建工作正常。如果我检查 Firebug，它们就会出现在 DOM 中。

// 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>

当我附加设置 data-toggle 时，我还会初始化 dropdown()属性。像这样:

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

我也尝试过手动触发器，但仍然不起作用。

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

有什么想法为什么它不起作用吗？

@编辑:我的错误，已解决。详情请参阅我的回答。

Answer 1

twitter bootstrap 中的所有示例显示链接 [tag a] 和下拉列表 [tag ul] 以及相同的父级。也许简单的解决方案是您应该在 a 之后添加 ul，而不是在正文末尾添加 ul $ ('选择器').after(ul)