Javascript .on(';单击';)无法很好地处理动态内容?
因此,我这里有一些代码,通过将引导导航栏预先添加到任何具有header_default类的内容来动态生成引导导航栏。我的问题是,我现在想对动态导航栏执行一些.on('click')事件,尽管它实际上不起作用。特别是当我按下导航栏的品牌部分时,我一直在尝试切换一些lorem ipsum。出于某种原因,“点击”警报将以这种方式正常工作,但其他任何方式都无法正常工作。我尝试过.toggle()、.hide()和console.log(),但都不起作用 我在同一导航栏上测试了相同的点击事件代码,但它不是由javascript生成的,而且运行良好。我对使用jquery/javascript还是很陌生,所以我肯定我在这里犯了一个相当明显的错误 我的HTML:Javascript .on(';单击';)无法很好地处理动态内容?,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,因此,我这里有一些代码,通过将引导导航栏预先添加到任何具有header_default类的内容来动态生成引导导航栏。我的问题是,我现在想对动态导航栏执行一些.on('click')事件,尽管它实际上不起作用。特别是当我按下导航栏的品牌部分时,我一直在尝试切换一些lorem ipsum。出于某种原因,“点击”警报将以这种方式正常工作,但其他任何方式都无法正常工作。我尝试过.toggle()、.hide()和console.log(),但都不起作用 我在同一导航栏上测试了相同的点击事件代码,但它不是
<!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>
文件
Lorem ipsum dolor sit amet,奉献精英。如果你是一个伟大的人,那么你的生命就是一个伟大的生命!威尔
我的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");
});
//头
$(文档).ready(函数(){
if($('#page').hasClass(“页眉默认值”)){
$(“”)
.prependTo($('第页'))
}//附加导航栏
}); //准备好了吗
//点击事件
$(文档).on('click','navbar brand',function(){
$('p')。切换(“慢”);
});
.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 -->
我认为您的问题在于在元素完成到就绪之前启动的单击事件
$(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
/*--move to here---*/
//Click event
$(document).on('click', '.navbar-brand', function() {
$('p').toggle("slow");
});
}); //document.ready
$(文档).ready(函数(){
if($('#page').hasClass(“页眉默认值”)){
$('ul class=“nav nav BAR nav”>).prependTo($('page'))
}//附加导航栏
/*--搬到这里来---*/
//点击事件
$(文档).on('click','navbar brand',function(){
$('p')。切换(“慢”);
});
}); //准备好了吗
我也认为这与装载顺序有关。这就是我尝试时的效果:
// Header
$(document).ready(function() {
if($('#page').hasClass("header_default")) {
$(longString)
.prependTo( $('#page') )
} // append navbar
$('.navbar-brand').on('click', function() {
$('p').toggle('slow');
});
}); //document.ready
这是一个
旁注:
longString
正是您想要的prepend
的内容。我还更改了longString
,使所有链接都指向#
,以便JSFIDLE可以很好地使用它。这不应该在您的$(文档)中。准备好了吗?@Jason Goemaat,不确定是否应该。但是把它放在里面并不能解决问题。
上的.on可以在追加之前,但可能必须在文档被删除之后ready@bekt尝试了这个,但没有解决问题。@bekt我的代码中一定有一个小的拼写错误,因为当我复制/粘贴你的代码时,它对我有效。让我检查一下,看看我漏掉了什么。@RobertC你漏掉了
上的
,所以它将重定向到当前url。@bekt Wow…难以置信,这一切都是因为我没有放一个#。我用一个#in尝试了我以前的代码,它成功了。问题最终是缺少了一个#。@RobertC-Heh,当时我想我抓不到它了。我用#
替换了所有URL,试图找出问题所在。祝您的项目顺利:)