kra*_*r65 4 html javascript jquery events twitter-bootstrap
我的菜单使用基本的 Twitter Bootstrap 导航栏，现在我想在受 Stackoverflow 系统启发的下拉菜单中显示通知。为了实现这一点，我想在单击下拉菜单时调用 api，为此我需要“捕获”下拉事件。根据文档，我需要像这样捕获事件：
\n\n$(\'#myDropdown\').on(\'show.bs.dropdown\', function () {\n // do something\xe2\x80\xa6\n})\n所以我在这里有一个工作小提琴，但是当我在自己的 html 中使用完全相同的代码（见下文）时，它不再工作了。有谁知道下面的代码有什么问题：
\n\n<!DOCTYPE html>\n<html lang="en">\n<head> \n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">\n\n <!-- jQuery -->\n <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>\n\n <!-- Bootstrap -->\n <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">\n <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>\n\n <script type="text/javascript">\n $(\'#jajaja\').on(\'show.bs.dropdown\', function () {\n alert(\'Come on lets show the dropdown!!\');\n });\n </script>\n</head>\n<body>\n<div class="container">\n <div class="row">\n <div class="navbar navbar-default" role="navigation">\n <div class="container-fluid">\n <div class="navbar-header">\n <a class="navbar-brand" href="/">My Website</a>\n </div>\n <div id="navbar" class="navbar-collapse">\n <ul class="nav navbar-nav navbar-right" id="jajaja">\n <li class="dropdown">\n <a href="" id="notifications-header" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Notifications <span class="caret"></span></a>\n <ul id="notifications" class="dropdown-menu" role="menu">\n <li><span class="glyphicon glyphicon-refresh text-center" aria-hidden="true"></span></li>\n </ul>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n</div>\n</body>\n</html>\n这是因为您使用 onload 加载 javascript 代码。请参阅左侧下拉列表中的 onload 选择。
因为你把代码放在 head 中，而不是等到 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>。
| 归档时间： |
|
| 查看次数： |
6222 次 |
| 最近记录： |