如何使用Jquery突出显示叠加层中的div

Question

想点击div和highlight, this div is inside an重叠`弹出窗口。我在下面添加了我的jquery代码，但高亮显示没有发生。有人可以建议我如何解决此问题吗？

添加的html显示在下面

$('#projectDataHereToDisplay > .row').click(function() {
  $(this).removeClass("highlight");
  $(this).addClass("highlight");
});

.highlight {
  background: #ebdb34;
}

.cleaner {
  float: left;
  padding: 20px 10px 10px 20px;
}

.rows {
  width: 1000px;
  min-height: 80px;
}

.rowsAlt {
  background-color: #edece8;
}

.cols {
  height: 100%;
  float: left;
}

.col1 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col2 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col3 {
  width: 200px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col4 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col5 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col6 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

#row2 {
  margin-left: 100px;
  margin-top: 50px;
  position: relative;
  width: 83%;
  margin: 20px 0px 0px 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="projectDataHereToDisplay" class="column">
  <div class="row">
    <div id="row2" class="rows rowsAlt">
      <div class="col1">FLG</div>
      <div class="col2">sun</div>
      <div class="col3">man,lion</div>
      <div class="col4"></div>
      <div class="col5">Byes</div>
      <div class="cleaner">Add here</div>
      <div class="col6"><a class="projecteditLink" href="">Edit Link</a></div>
    </div>
  </div>

  <div class="row">
    <div id="row2" class="rows rowsAlt">
      <div class="col1">FLG</div>
      <div class="col2">sun</div>
      <div class="col3">man,lion</div>
      <div class="col4"></div>
      <div class="col5">Byes</div>
      <div class="cleaner">Add here</div>
      <div class="col6"><a class="projecteditLink" href="">Edit Link</a></div>
    </div>
  </div>
</div>

Answer 1

它将解决您的问题。现在它将突出显示您的行。

$('.rows').click(function() {

  $(this).removeClass("highlight");
  $(this).addClass("highlight");
});

<style>
.highlight {
  background: #ebdb34 !important;
}

.cleaner {
  float: left;
  padding: 20px 10px 10px 20px;
}

.rows {
  width: 1000px;
  min-height: 80px;
}

.rowsAlt {
  background-color: #edece8;
}

.cols {
  height: 100%;
  float: left;
}

.col1 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col2 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col3 {
  width: 200px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col4 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col5 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

.col6 {
  width: 100px;
  float: left;
  padding: 20px 10px 10px 20px;
}

#row2 {
  margin-left: 100px;
  margin-top: 50px;
  position: relative;
  width: 83%;
  margin: 20px 0px 0px 100px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="projectDataHereToDisplay" class="column">
  <div class="row">
    <div id="row2" class="rows rowsAlt">
      <div class="col1">FLG</div>
      <div class="col2">sun</div>
      <div class="col3">man,lion</div>
      <div class="col4"></div>
      <div class="col5">Byes</div>
      <div class="cleaner">Add here</div>
      <div class="col6"><a class="projecteditLink" href="">Edit Link</a></div>
    </div>
  </div>

  <div class="row">
    <div id="row2" class="rows rowsAlt">
      <div class="col1">FLG</div>
      <div class="col2">sun</div>
      <div class="col3">man,lion</div>
      <div class="col4"></div>
      <div class="col5">Byes</div>
      <div class="cleaner">Add here</div>
      <div class="col6"><a class="projecteditLink" href="">Edit Link</a></div>