Почему я не могу нажать на этот div?

Question

Когда я нажимаю на x внутри закрывающего div, я хочу, чтобы фон изменился на белый.

Это разметка:

<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; событие будет обработано также родителем, которое читает класс после его удаления.