为什么我不能点击这个div？

Question

当我点击关闭div中的x时,我希望背景变为白色.

这是标记:

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

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

这是css:

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

演示:http://jsfiddle.net/JMeff/

Answer 1

您可以单击它,但由于默认事件冒泡,单击也会单击父项.要获得所需的效果,请通过以下方式停止气泡.stopPropagation():

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

你可以在这里测试一下.