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

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

当我单击close div内部的x时，我希望背景变为白色。

This is the markup:

这是标记:

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

This is the javascript:

这是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:

这是css:

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

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

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

3 个解决方案

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

您可以单击它，但是由于默认事件冒泡，单击也会单击父事件。要获得想要的效果，可以通过.stopPropagation()停止气泡，如下所示:

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

You can test it out here.

你可以在这里测试一下。

#2

Try this one:

试试这个:

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

Note the new return false: otherwise the event will be caught by the $('.list-item').live instead of the one you want, the $('.list-item .close').live.

注意新的return false:否则事件将被$('.list-item')捕获。生活，而不是你想要的，那美元。列表项.close .live”)。

#3

Because you didn't return false in the second event handler. Without a return false; the event will be handled be parent too which reads the class after you have removed it.

因为在第二个事件处理程序中没有返回false。没有返回错误;事件也将被处理为父事件，在删除类之后读取该类。

#1