Jquery addClass功能不适用于动态内容

时间：2017-02-27 19:00:14

标签： javascript jquery firebase firebase-realtime-database

更新：我的css页面中有一个未闭合的括号（标签{）。当我删除它时，它可以工作。

我正在尝试为使用Jquery选择器动态添加到html页面的p元素添加样式。但是，我无法让它适用于动态内容。它适用于简单的for循环（http://codepen.io/anon/pen/KWppoJ），但不适用于循环读取数据库读取的数据。

我的完整HTML页面：

<html>
<head>
  <title>Columbia Ride Share</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="post-ride.css">
   <script>console.log("hello anyone in here");</script>

  <body>
      <header>
          <h1 class = "page-title">Columbia Ride Share</h1>
          <nav>
              <ul>
                  <li><a href="index.html">home</a></li>
                  <li><button class="btn btn-link" onclick = "document.getElementById('id02').style.display='block'"style="width:auto;">CREATE A RIDE</button></a></li>
                  <div id="id02" class="modal">
                      <form class="modal-content animate" action="action_page.php">
                          <div class="imgcontainer">
                               <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span>
                           </div>
                           <div class = "loginMsg">
                               <p>Where are you headed?<p>
                               <a href="create-a-ride-to-airport.html">I need a ride to the airport</a>
                               <a href="create-a-ride-from-airport.html">I need a ride to campus</a>
                         </div>
                      </form>
                  </div>
                 <li class = "login"><button onclick = "`document.getElementById('id01').style.display='block'"style="width:auto;">Login</button></li>
                 <div id="id01" class="modal">
                     <form class="modal-content animate" action="action_page.php">
                         <div class="imgcontainer">
                             <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
                         </div>
                         <div class="loginMsg">
                             <p>hi there!</p>
                             <p>log in to post and comment on columbia ride share</p>
                         </div>
                         <button class="loginBtn loginBtn--facebook">connect with facebook</button>
                         <button onclick = "googleSignin()" class="loginBtn loginBtn--google">connect with google</button>
                      </form>
                   </div>

               </ul>
         </nav>
    </header>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <div id= "ride"></div> 

<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase-database.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAIY9XOb5QVDTxJKxtvSZRiyqgpGasHF3M",
    authDomain: "columbia-ride-share.firebaseapp.com",
    databaseURL: "https://columbia-ride-share.firebaseio.com",
    storageBucket: "columbia-ride-share.appspot.com",
    messagingSenderId: "1058399238109"
  };
  firebase.initializeApp(config);
</script>

<script src="postRides.js" type="text/javascript"></script>
<script>postRides("TOairport", "JFK");</script>

<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

<script>
var modal = document.getElementById('id02');

window.onclick= function(event){

    if(event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</body>
</html>

我的CSS页面：

a{
    color: #c4d8e2;
    text-decoration:none;
}

body {
        height: 100%;
        margin: 0;
        width: 100%;
        color: #c4d8e2;
        font-family: "Helvetica Neue Light", Helvetica Neue, serif;
}


.page-title {
    position: relative;
    top: -2%:
    font-size: 36px;
    font-weight: lighter;  
    margin-left:5%;
}

/*Navigation Bar*/ 

nav ul {
   display: inline;
}

nav li{
  margin: 0; 
  padding: 0 10px;
  display: inline; 
  position: relative;
  left: 63.5%;
  top: -45px;
  font-variant: small-caps; 
  font-weight: 500;
}

form{
    position: relative;
    float:left;
    margin-left: 30%;
    margin-top: 5%;
}

label{
    line-height: 50px;

.ride{
    position: relative;
    padding: .5em;
    margin-left: 10%;
    background-color: red;
}

.style{
position: relative;
    padding: .100em;
    margin-left: 10%;

}

p.style{
    background-color: #fefefe;
    margin: 5px auto; /* 15% from the top and centered */
    margin-left: 40%;
    border: 12px solid #888;
    border-color: #c4d8e2;
   // width: 30%; /* Could be more or less, depending on screen size */
   // height: 60%;

}


}
.loginMsg{
    display: relative;
    margin-top: 25%;
    font-size: 22px;
    color: black;
}

.loginMsg p{

     text-align: center;
}
.loginMsg a{
    display:block;
    margin-top:13px;
}


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5px auto; /* 15% from the top and centered */
    border: 12px solid #888;
    border-color: #c4d8e2;
    width: 30%; /* Could be more or less, depending on screen size */
    height: 60%;

}

/* The Close Button */
.close {
    /* Position it in the top right corner outside of the modal */
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}


/* Close button on hover */
.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Shared */
.loginBtn {
  padding: 2em;
  box-sizing: border-box;
  position: relative;
  width: 13em;  - apply for fixed size
  margin: 0.2em;
  padding: 0 15px 0 46px;
  border: none;
  text-align: left;
  line-height: 34px;
  white-space: nowrap;
  border-radius: 0.2em;
  font-size: 16px;
  font-variant: small-caps;
  top: 10%;
  left: 20%;
  color: #FFF;
}
.loginBtn:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 100%;
}
.loginBtn:focus {
  outline: none;
}


.loginBtn:active {
  box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}


/* Facebook */
.loginBtn--facebook {
  display: block;
  background-color: #4C69BA;
  margin-bottom: 5px;
  background-image: linear-gradient(#4C69BA, #3B55A0);
  font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;
  text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
  border-right: #364e92 1px solid;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
  background-color: #5B7BD5;
  background-image: linear-gradient(#5B7BD5, #4864B1);
}


/* Google */
.loginBtn--google {
  font-family: "Roboto", Roboto, arial, sans-serif;
  background: #DD4B39;
  display: block;
}
.loginBtn--google:before {
  border-right: #BB3F30 1px solid;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}

.loginBtn--google:hover,
.loginBtn--google:focus {
  background: #E74B37;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

.instructions{
    position: relative;
    margin-left:10%;
    margin-top: 50%;
    font-size: 36px;
}

enter image description here enter image description here 原始代码 的javascript：

ref.child(direction + '/' + airport).once("value", function(data) {
             data.forEach(function(snapshot) {
                 $("#ride").append('<p>' + snapshot.val().from + 'to: ' + snapshot.val().to + 'day: ' + snapshot.val().when + '</p>').addClass('style');
             });
});

的CSS：

.style{
    position: relative;
    padding: .100em;
    margin-left: 10%;
}

.style p{
    background-color: #fefefe;
    margin: 5px auto; /* 15% from the top and centered */
    margin-left: 40%;
    border: 12px solid #888;
    border-color: #c4d8e2;
}

HTML： 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id= "ride"></div>

1 个答案:

答案 0 :(得分：0)

$('#ride').append('<p class="style">text</p>');
相关问题
最新问题