.on('click')不能很好地播放动态内容

.on('click') not playing well with dynamic content?

本文关键字：播放 动态 click on 不能 很好      更新时间：2023-09-26

所以我在这里有一些代码，动态地生成一个引导导航栏前置到任何类的header_default。我的问题是，我现在想做一些。on('click')事件的动态导航栏，虽然它不是真正的工作。具体来说，当我按下导航条的品牌部分时，我一直在尝试切换一些lorem ipsum。出于某种原因，"打开"("点击")警报将以这种方式工作，但没有其他方法。我尝试过。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

这里有一个例子JSFiddle

旁注:longString就是您想要prepend的内容。我也改变了longString有所有的链接指向#，所以JSFiddle会很好地发挥它。

我认为你的问题是在元素完成之前启动了点击事件。

$(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
相关文章：