通知栏无法消除点击

Question

Trying to create a privacy policy notification bar at the footer of a page and only showing for new visitors. Looking to dismiss the notification on click of acceptance. Right now the bar is showing up fixed at the bottom of page but I can't seem to get the notification bar to dismiss on click.

<span class="banner tracking-banner p-t-1">
<div class="container">
<div class="row">
  <div class="col-sm-10 text-left m-b-1">
    This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>.
  </div>
  <div class="col-sm-2 m-b-1">
    <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button>
  </div>
</div>
</div>
</span>

JS

$(".banner").fadeIn("slow").append(".container");
$(".dismiss").click(function(){
   $(".banner").fadeOut("slow");
});

Answer 1

wrap your code inside document ready function

 $(document).ready(function(){ $(".banner").fadeIn("slow").append(".container"); $(".dismiss").click(function(){ $(".banner").fadeOut("slow"); }); }) 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span class="banner tracking-banner pt-1"> <div class="container"> <div class="row"> <div class="col-sm-10 text-left mb-1"> This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>. </div> <div class="col-sm-2 mb-1"> <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button> </div> </div> </div> </span> 

Answer 2

Change your span to div? make your fadeOut working.

<div class="banner tracking-banner p-t-1">
<div class="container">
<div class="row">
  <div class="col-sm-10 text-left m-b-1">
    This website uses cookies and other 3rd party services to customize and provide you a more personalized experience. To find out more, see our <a href="/privacy/">Privacy Policy</a>.</div>
  <div class="col-sm-2 m-b-1">
    <button class="dismiss btn btn-sm btn-block btn-invert">Accept</button>
  </div>
</div>
</div>
</div>