单击未触发的子事件

Question

HTML ：

<div id="schemeView" class="view" style="margin-top: 0px; opacity: 1; z-index: 1;">
    <ul>
        <li class="scheme-color" style="width:16.666666666666668%"> 
            <div class="card" style="background:#288dff">
                <span class="card-value">#288dff</span> 
            </div> 
        </li>
    </ul>
</div>

CSS ：

#schemeView {
    position: absolute;
    background: #f7f7f7;
    top: 0;
    z-index: -1;
    opacity: 0;
    white-space: nowrap;
}
#schemeView ul {
    width: 100%;
    height: 100%;
    margin-top: 0;
    padding: 0;
    text-align: center;
}
.scheme-color {
    height: 100%;
    max-width: 400px;
    list-style: none;
    display: inline-block;
    margin-top: 5%;
    cursor: pointer;
}
div.card {
    background: #288dff;
    width: 90%;
    height: 80%;
    margin-left: 5%;]
}
span.card-value {
    position: relative;
    display: block;
    width: 100%;
    height: 35px;
    background: rgba(243,243,243,.75);
    text-align: center;
    padding-top: 15px;
    color: #555;
    font-family: Monaco,Courier,monospace;
}
div.card:hover {
    box-shadow: 0 20px 30px #777;
}

JS ：

$(document).ready(function() {
    $('.scheme-color').click(function() {
      alert('hi')
    });
});

它应该做什么：

• 每次点击li元素时，都会提醒'hi'

正在做什么：

当我点击li 时，
• 绝对没有
• 当我改变时 .scheme-color到#schemeView ul它完美无缺，但如果我使用的话 #schemeView ul li它什么都不做

  

我怀疑它与无序列表及其内容的样式规则有关

Answer 1

您的代码运行正常。但是，如果您在页面加载后添加目标内容，请使用事件委派，如下所示：

$(document).ready(function() {
    $('#schemeView').on('click', '.scheme-color', function() {
        alert('hi')
    });
});

＆＃13;

＆＃13;

$(document).ready(function() {
    $('#schemeView').on('click', '.scheme-color', function() {
      alert('hi')
    });
});

＆＃13;

#schemeView {
    position: absolute;
    background: #f7f7f7;
    top: 0;
    z-index: -1;
    opacity: 0;
    white-space: nowrap;
}
#schemeView ul {
    width: 100%;
    height: 100%;
    margin-top: 0;
    padding: 0;
    text-align: center;
}
.scheme-color {
    height: 100%;
    max-width: 400px;
    list-style: none;
    display: inline-block;
    margin-top: 5%;
    cursor: pointer;
}
div.card {
    background: #288dff;
    width: 90%;
    height: 80%;
    margin-left: 5%;]
}
span.card-value {
    position: relative;
    display: block;
    width: 100%;
    height: 35px;
    background: rgba(243,243,243,.75);
    text-align: center;
    padding-top: 15px;
    color: #555;
    font-family: Monaco,Courier,monospace;
}
div.card:hover {
    box-shadow: 0 20px 30px #777;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="schemeView" class="view" style="margin-top: 0px; opacity: 1; z-index: 1;">
    <ul>
        <li class="scheme-color" style="width:16.666666666666668%"> 
            <div class="card" style="background:#288dff">
                <span class="card-value">#288dff</span> 
            </div> 
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

它适用于$('.scheme-color')。运行以下代码段：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.scheme-color').click(function() {
    alert('hi')
  });
});

＆＃13;

#schemeView {
  position: absolute;
  background: #f7f7f7;
  top: 0;
  z-index: -1;
  opacity: 0;
  white-space: nowrap;
}
#schemeView ul {
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0;
  text-align: center;
}
.scheme-color {
  height: 100%;
  max-width: 400px;
  list-style: none;
  display: inline-block;
  margin-top: 5%;
  cursor: pointer;
}
div.card {
  background: #288dff;
  width: 90%;
  height: 80%;
  margin-left: 5%;
  ]
}
span.card-value {
  position: relative;
  display: block;
  width: 100%;
  height: 35px;
  background: rgba(243, 243, 243, .75);
  text-align: center;
  padding-top: 15px;
  color: #555;
  font-family: Monaco, Courier, monospace;
}
div.card:hover {
  box-shadow: 0 20px 30px #777;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="schemeView" class="view" style="margin-top: 0px; opacity: 1; z-index: 1;">
  <ul>
    <li class="scheme-color" style="width:16.666666666666668%">
      <div class="card" style="background:#288dff">
        <span class="card-value">#288dff</span> 
      </div>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;