javascript - 未触发 child 的点击事件

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 它什么都不做

I suspect it has something to do with the styling rules of the unordered list and its content

Answer 1

您的代码运行良好。但是，如果您在页面加载后添加目标内容，请使用事件委托(delegate)，如下所示:

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

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

#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;
}

<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>