Why I can't click on this div?

Question

When I click on the x inside of the close div, I want the background to change to white.

This is the markup:

<div class="list-item list-item-active">
    <div class="close">x</div>
</div>

This is the javascript:

$(document).ready(function(){
    $('.list-item').live('click', function() {
        if (!$(this).hasClass('list-item-active'))
            $(this).addClass('list-item-active');
    });
    $('.list-item .close').live('click', function() {
        $(this).parent().removeClass('list-item-active');
    });
});

This is the css:

.list-item {width:100px;height:100px;background:#fff}
.list-item-active {background:#ccc}

Demo: http://jsfiddle.net/JMeff/

Answer 1

You can click it, but the click also clicks the parent due to default event bubbling. To get the effect you want, stop the bubble via .stopPropagation(), like this:

$('.list-item .close').live('click', function(e) {
    $(this).parent().removeClass('list-item-active');
    e.stopPropagation();
});

You can test it out here.