如何捕獲Bootstrap導航欄下拉事件？
[英]How to catch Bootstrap navbar dropdown event?
問題描述
我在菜單上使用了基本的Twitter Bootstrap導航欄，現在我想在Stackoverflow上受系統啟發的下拉菜單中顯示通知。 為此，我想在單擊下拉列表時調用api，為此我需要“捕獲”下拉事件。 根據文檔 ，我需要像這樣捕獲事件：
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})
因此，我在這里工作正常 ，但是當我在自己的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>
1 個解決方案
解決方案1
4 已采納 2015-01-30 14:39:18
為什么它在jsfiddle中起作用？
這是因為您使用onload加載了javascript代碼。 請參閱左側下拉列表中的onload選項。
為什么在我的網站上不起作用？
因為您將代碼放在頭上，所以您不必等到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!!');
});
});
其他好的做法是在關閉正文</body>之前放置所有javascript。
如何修復導航欄內的下拉按鈕-引導程序？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.