如何捕获Bootstrap导航栏下拉事件? [英] How to catch Bootstrap navbar dropdown event?
问题描述
我在菜单上使用了基本的Twitter Bootstrap导航栏，现在我想在受Stackoverflow系统启发的下拉菜单中显示通知.为此，我想在单击下拉列表时调用api，为此我需要捕获"下拉事件.根据文档，我需要像这样捕获事件:
I'm using the basic Twitter Bootstrap navbar for my menu, and I now want to show notifications in a dropdown inspired by the system here on Stackoverflow. To accomplish this I want to call the api when clicking the dropdown, for which I need to "catch" the dropdown event. According to the docs, I need to catch the event like so:
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})
所以我有一个在这里工作的小提琴，但是当我自己使用完全相同的代码时html(请参见下文)不再起作用.有人知道下面的代码有什么问题吗?
So I've got a working fiddle here, but when I use the exact same code in my own html (see below) it doesn't work anymore. Does anybody know what's wrong with the code below:
<!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>
推荐答案
为什么在jsfiddle中起作用?
这是因为您使用onload加载了javascript代码.请参阅左侧下拉菜单中的onload选项.
Why it does work in the jsfiddle?
This is because you load the javascript code using onload. See the onload selection in the dropdown left.
因为您将代码放在头上，所以您不必等到dom准备好.
Because you place the code in the head and you don't wait till the dom is ready.
检查dom是否准备就绪.可以这样:
Check if the dom is ready. Can be done like so:
$(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!!');
});
});
其他好的做法是在关闭正文</body>之前放置所有javascript.
Other good practice is placing all javascript just before closing the body </body>.
这篇关于如何捕获Bootstrap导航栏下拉事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
