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

Question

当我单击 div 内的子元素（'butMedWhite' 类）时 - jquery 认为我正在单击父元素（'.alternative'） - 即使我在控制台中转储 'this' 它说我有单击“替代”类（请参见下面的代码）-不是“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 函数一样。

如果您想要单击的元素，请不要使用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)