未触发孩子的点击事件

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')
    });
});

What it should do :

• every time i click an li element, it will alert 'hi'

What it's doing :

• absolutely nothing when i click an li
• when i change .scheme-color to #schemeView ul it works perfectly but if i use #schemeView ul li it does nothing

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

Answer 1

Your code works fine. But, if you're adding the target content after the page loads, use event delegation as follows:

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

Answer 2

It does work with $('.scheme-color') . Run the below snippet:

 $(document).ready(function() { $('.scheme-color').click(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.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>