Почему не срабатывает mouseleave?

Question

[denism300]

Есть код:

jQuery('a.woosw-btn').html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
jQuery('a.woosw-btn').mouseenter(function(e) {
        jQuery(this).html('<i class="fa fa-heart" aria-hidden="true"></i>');
}).mouseleave(function(e) {
        jQuery(this).html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
});

событие mouseenter работает, а mouseleave нет. Как исправить?

Comments

[be_a_man]

Не юзать чейнинг

[denism300]

be_a_man, без ченнинга не работает точно так же

jQuery('a.woosw-btn').html('<i class="fa fa-heart-o" aria-hidden="true"></i>');

jQuery(document).on('mouseenter', 'a.woosw-btn', function() {
    jQuery(this).html('<i class="fa fa-heart" aria-hidden="true"></i>');
});
jQuery(document).on('mouseleave', 'a.woosw-btn', function() {
    jQuery(this).html('<i class="fa fa-heart-o" aria-hidden="true"></i>');
});

и mouseout тоже не срабатывает

Answer 1

[0xD34F]

Наверное, элемент, к которому прицеплен обработчик события, полностью перекрывается вложенным элементом. А так как mouseleave не всплывает, обрабатывать нечего.

Цепляйте обработчики к вложенным элементам (конечно, придётся отказаться от их постоянного пересоздания).

Comments

[denism300]

сделал так:

jQuery(document).on('mouseover', 'a.woosw-btn', function() {
    jQuery(this).find('i').removeClass('fa-heart-o').addClass('fa-heart');
});
jQuery(document).on('mouseout', 'a.woosw-btn', function() {
    jQuery(this).find('i').removeClass('fa-heart').addClass('fa-heart-o');
});

работает

[0xD34F]

denism300,

$(document).on('mouseover mouseout', 'a.woosw-btn i', function(e) {
  const out = e.type === 'mouseout';
  $(this).toggleClass('fa-heart', !out).toggleClass('fa-heart-o', out);
});