.on('click') 不能很好地处理动态内容？答案

【问题标题】：.on('click') not playing well with dynamic content?.on('click') 不能很好地处理动态内容？
【发布时间】：2014-08-23 02:07:09
【问题描述】：

所以我在这里有一些代码可以动态生成引导导航栏，方法是将其添加到任何带有 header_default 类的内容中。我的问题是我现在想对动态导航栏执行一些 .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 -->

【问题讨论】：

不应该在你的$(document).ready函数中吗？
@Jason Goemaat，不确定是否应该。但把它放在里面并不能解决问题。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

我也认为这与加载顺序有关。这就是我尝试的方法：

// 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 只是您想要 prepend 的内容。我还更改了longString，让所有链接都指向#，这样JSFiddle 就可以很好地使用它。

【讨论】：

问题最终是缺少#。
@RobertC Heh，当时我想我不会抓住它。我用# 替换了所有的网址，试图找出问题所在。祝你项目的其余部分好运:)

【解决方案2】：

我认为您的问题是在元素完成准备好之前启动的点击事件。

$(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

【讨论】：

.on 可以在追加之前，但它可能必须在文档准备好之后
@bekt 试过了，没有解决问题。
@bekt 我的代码中一定有一个小错字，因为当我复制/粘贴你的代码时，它对我有用。让我检查一下，看看我错过了什么。
@RobertC 您在<a class="navbar-brand" href=""> 上错过了#，因此它将重定向到当前网址。
@bekt 哇...难以置信，这都是因为我没有输入 # 造成的。我也用# in 尝试了我以前的代码，它可以工作。