javascript - Jquery click - 认为它是父元素，而不是子元素

Question

当我单击 div 内的子元素(“butMedWhite”类)时 - jquery 认为我正在单击父元素(“.alternative”) - 即使我将“this”转储到控制台中说我点击了“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 为您的回调提供绑定(bind)事件处理程序的元素作为上下文，就像 native DOM 函数一样。

如果您想要单击的元素，请不要使用 this 而是使用 e.target :

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