javascript - Jquery 事件处理程序 ".on()"

Question

我的 Jquery 事件处理程序“.on()”有问题。

我的主页上的帖子上有一个“收藏夹”按钮。

如果您还没有收藏该帖子:

• li 不活跃
• 事件 1

如果您收藏了该帖子:

• 李活跃
• 事件 2

为什么当我多次单击此按钮 (>1) 时，我的脚本执行相同的方法(事件)，而我的 li 上有我的类 .active或不？

就像 .on() 不管理动态类更改...

我的 HTML:

<ul class="post-list">
    <li>
        <a href="#" class="favorite">Favorite</a>
    </li>
    <li class="active">
        <a href="#" class="favorite">Favorite</a>
    </li>
</ul>

我的 Jquery:

$(function(){
    $('.post-list li.active .favorite').on('click', function(e){
        e.preventDefault;
        // Event 2
    });
    $('.post-list li:not(.active) .favorite').bind('click', function(e){
        e.preventDefault;
        // Event 1
    });
});

Answer 1

jQuery 将事件绑定(bind)到选择器的结果(一次)。您希望每次事件触发时都重新计算选择器，但此时处理程序已经绑定(bind)到最初与您的选择器匹配的元素。

尝试:

$(function(){
    $('.post-list li .favorite').on('click', function(e){
        e.preventDefault();
        if (e.target.hasClass('active') {
           //Event 2
        }
        else {
           //Event 1
        }
    });
});