Почему не закрашивается иконка при клике на число?

Question

[drtvader]

Почему при клике на число иконка не закрашивается? При клике на иконку всё норм. Вроде прикрепил к ссылке, но не работает как нужно.

<a href="javascript:void(0);" data-content-target="#b-favorites-popover" title="" class="b-product-popover-trigger fav-link" data-original-title="">
    <span class="b-page-header__number">8</span>
    <i class="icon-favorites"></i>
</a>

$(function() {
    $('.fav-link').on('click', function(e) {
	    $('.icon-favorites').toggleClass("active");
	});
    $(document).click(function (event) {
        if ($(event.target).closest('.icon-favorites').length == 0) {
            $('.icon-favorites').removeClass('active');
        }
    });
});

Comments

[Алмаз Бисенбаев]

Не сильно разбираюсь в jquery, но посмею предположить, что здесь при клике срабатывают одновременно "e" и "event".

Answer 1

[MhMadHamster]

Вы повесили обработчик на клик по документу который снимает активный класс с иконки, т.е. когда вы кликаете по цифре(span элементу) у вас сначала обрабатывается обработчик который вешает класс active на иконку, затем событие всплывает до документа и вы убираете класс active с иконки. Чтобы избежать данного поведения необходимо предотвратить всплытие события дальше по дереву т.е. добавить строчку e.stopPropagation(); в обработчик клика по ссылке, а так же советую прочитать про всплытие событий в javascript.
При клике по самой иконке событие так же всплывало, но у вас стоит if в котором вы проверяете наличие класса иконки у родителей элемента по которому был произведен клик, так же closest начинает искать переданный селектор начиная с самого элемента, поэтому класс не убирался.