如何捕捉 Bootstrap 导航栏下拉事件？

Question

我在菜单中使用基本的 Twitter Bootstrap 导航栏，现在我想在受 Whosebug 系统启发的下拉菜单中显示通知。为此，我想在单击下拉菜单时调用 api，为此我需要 "catch" 下拉事件。根据 the docs，我需要像这样捕捉事件：

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

所以我有一个 working fiddle here，但是当我在我自己的 html 中使用完全相同的代码时（见下文）它不再起作用了。有人知道下面的代码有什么问题吗：

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- jQuery -->
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <!-- Bootstrap -->
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $('#jajaja').on('show.bs.dropdown', function () {
            alert('Come on lets show the dropdown!!');
        });
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">My Website</a>
                </div>
                <div id="navbar" class="navbar-collapse">
                    <ul class="nav navbar-nav navbar-right" id="jajaja">
                        <li class="dropdown">
                            <a href="" id="notifications-header" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Notifications <span class="caret"></span></a>
                            <ul id="notifications" class="dropdown-menu" role="menu">
                                <li><span class="glyphicon glyphicon-refresh text-center" aria-hidden="true"></span></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Answer 1

为什么它在 jsfiddle 中有效？

这是因为您使用 onload 加载了 javascript 代码。请参阅左侧下拉列表中的加载选择。

为什么它在我的网站上不起作用？

因为您将代码放在头部，而不是等到 dom 准备就绪。

我该如何解决这个问题？

检查 dom 是否准备就绪。可以这样做：

$(document).ready(function() {
    $('#jajaja').on('show.bs.dropdown', function () {
        alert('Come on lets show the dropdown!!');
    });
});

或者简而言之：

$(function() {
    $('#jajaja').on('show.bs.dropdown', function () {
        alert('Come on lets show the dropdown!!');
    });
});

其他好的做法是将所有 javascript 放在关闭主体 </body> 之前。

如何捕捉 Bootstrap 导航栏下拉事件？

How to catch Bootstrap navbar dropdown event?

html

javascript

jquery

events

twitter-bootstrap

为什么它在 jsfiddle 中有效？

为什么它在我的网站上不起作用？

我该如何解决这个问题？