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
它什么都不做我怀疑它与无序列表及其内容的样式规则有关
答案 0 :(得分:1)
您的代码运行正常。但是,如果您在页面加载后添加目标内容,请使用事件委派,如下所示:
$(document).ready(function() {
$('#schemeView').on('click', '.scheme-color', function() {
alert('hi')
});
});
$(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;
答案 1 :(得分:0)
它适用于$('.scheme-color')
。运行以下代码段:
$(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;