Bootstrap - Problems with Popovers/jQuery
Question
I've just started experimenting with bootstrap and I've ran into a few issues. Anything that uses JavaScript/jQuery just doesn't seem to work. I've tried default Bootstrap, and the theme I'm currently using "Darkly". Same issues on each.
This is the code on a page that uses a popover.
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<!-- Basic
================================================== -->
<meta charset="utf-8">
<title>Amplitude Gaming</title>
<meta name="description" content="Amplitude Gaming: Website Testing">
<meta name="author" content="Little NEKO">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/custom.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Favicons
================================================== -->
</head>
<!-- Page Start
================================================== -->
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo-nav"href="#"><img src="images/amplogo1.png"></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="news.html">News</a></li>
<li><a href="haste.html">Haste</a></li>
<li class="active"><a href="#">Test</a></li>
</ul>
</div>
</div>
</div>
<div class="jumbotron">
<h1>Test</h1>
<p>Testing popovers</p>
<div class="btn-group">
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title="">Test</button>
</div>
</div>
<!-- End Document
================================================== -->
<script type="text/javascript" src="js-plugin/respond/respond.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js-plugin/jquery-ui/jquery-ui-1.8.23.custom.min.js"></script>
<!-- third party plugins -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
You can see a live version here: http://www.amplitudegaming.com/test.html
2 answers
solution1
1 ACCPTED 2014-04-05 20:41:06
You have to activate the popover using jQuery..
$("[data-toggle=popover]").popover();
solution2
-1 2014-12-24 07:38:40
Including two jQuery file will cause the problem. You have included in header:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Then again in footer you have included:
<script type="text/javascript" src="js-plugin/jquery/1.8.3/jquery.min.js"></script>
Just remove one of the two.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.