所以我这里有一些代码通过将它添加到任何带有 header_default 类的内容来动态生成 Bootstrap 导航栏。我的问题是我现在想对动态导航栏执行一些 .on('click') 事件，尽管它并没有真正起作用。具体来说，当我按下导航栏的品牌部分时，我一直在尝试切换一些 lorem ipsum。出于某种原因，一个 on('click') 警报将以这种方式正常工作，但没有别的。我试过 .toggle()、.hide() 和 console.log()，但都不起作用。
我已经在同一个导航栏上测试了相同的点击事件代码，但它不是由 javascript 生成的，而且它工作正常。我对使用 jquery/javascript 还是很陌生，所以我当然，我在这里犯了一个相当明显的错误。
我的 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--stylesheets-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<!--Header-->
<nav id="page" class="header_default"></nav>
<!--Text-->
<div class="body-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat autem dolorum, earum adipisci magni rem. Deserunt sed aut, ad neque cum nulla rem vitae quos ducimus esse voluptatibus maxime! Vel.</p>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="javascript.js"></script>
</html>
我的Javascript:
// Header
$(document).ready(function() {
if($('#page').hasClass("header_default")) {
$('<nav class="container header_default"><nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><a class="navbar-brand" href="">Brand</a></div><div><ul class="nav navbar-nav"><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li><li><a href="privacy.html">Privacy Policy</a></li></ul></div></nav></nav>')
.prependTo( $('#page') )
} // append navbar
}); //document.ready
//Click event
$(document).on('click', '.navbar-brand', function() {
$('p').toggle("slow");
});
.prependTo() 很简单:
<nav class="header_default">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="privacy.html">Privacy Policy</a></li>
</ul>
</div>
</nav><!--navbar-default-->
</nav><!-- container -->
最佳答案
我也认为这与加载顺序有关。这是我尝试过的方法:
// Header
$(document).ready(function() {
if($('#page').hasClass("header_default")) {
$(longString)
.prependTo( $('#page') )
} // append navbar
$('.navbar-brand').on('click', function() {
$('p').toggle('slow');
});
}); //document.ready
这是一个 example JSFiddle
旁注:longString 只是您想要添加 的内容。我还更改了 longString，让所有链接都指向 #，这样 JSFiddle 就能很好地使用它。
关于javascript - .on ('click' ) 不能很好地处理动态内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25438407/