JQuery click - считает его родительский элемент, а не дочерний

Question

Когда я нажимаю на дочерний элемент внутри div (класс 'butMedWhite') - jquery думает, что я нажимаю на родительский элемент ('.alternative'). - даже когда я сбрасываю «это» внутри консоли, он говорит, что я нажал на альтернативу класса (см. код ниже) - не класс «butMedWhite» - есть ли у кого-нибудь идеи, почему? Вот HTML:

<div class="alternative _activeCategory"> 
    <div class="alternative_inner"></div> 
    <div class="expandable" style="display: block;"> 
     <div class=" criteriaContainer"> 
      <a class="butMedWhite altCreator">add rule</a> 
     </div> 
    </div> 
</div> 

и вот JQuery:

$('.altExpander').on('click', '.alternative', function(e) { 
        console.log(this); 
        if(!$(this).hasClass('_activeCategory')){ 
         expandCategory($(this)); 
        }else{ 
         closeCategory(); 
        } 
       }); 

Спасибо за любую помощь!

Answer 1

jQuery предоставляет в качестве контекста ваш обратный вызов элемент, на который вы связали обработчик событий, так же как и собственные функции DOM.

Если вы хотите Clicked элемент вместо этого, не используйте this но e.target:

$('.altExpander').on('click', '.alternative', function(e) { 
    var clicked = $(e.target); 
    console.log(clicked); 
    if(!clicked.hasClass('_activeCategory')){ 
      expandCategory(clicked); 
    }else{ 
      closeCategory(); 
    } 
}); 

Answer 2

Это потому, что ваш селектор ".alternative" в этой строке:

$('.altExpander').on('click', '.alternative', function(e) 

Если вы хотите this, чтобы быть якорной меткой, вам необходимо использовать

$('.altExpander').on('click', '.alternative a', function(e)