twitter bootstrap 动态添加下拉菜单答案

【问题标题】：twitter bootstrap dynamically add dropdowntwitter bootstrap 动态添加下拉菜单
【发布时间】：2013-06-22 12:21:20
【问题描述】：

我正在实施一个用户通知系统。当页面加载时，会发出 AJAX 请求并且如果存在通知，它们会呈现为 <ul>，该 <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();

任何想法为什么它不起作用？

@EDIT：我的错误，解决了。详情见我的回答。

【问题讨论】：

标签： javascript twitter-bootstrap drop-down-menu

【解决方案1】：

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

【讨论】：