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

You can test it out here

Answer 2

试试这个：

$(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');
        return false;
    });
});

请注意新的return false：否则该事件将被$('.list-item').live而不是您想要的$('.list-item .close').live抓住。

Answer 3

因为你没有在第二个事件处理程序中返回false。如果没有return false;，事件将被处理为父级，在删除它之后会读取该类。

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

3 个答案: