Question

我遇到了Jquery事件处理程序＆＃34; .on（）＆＃34;的问题。

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

如果您还没有收到帖子：

li not active
活动1

如果你有利于帖子：

li active
活动2

为什么当我在此按钮上多次点击（＆gt; 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将事件绑定到选择器的结果（一次）。您希望每次事件触发时都重新计算选择器，但此时处理程序已经绑定到最初与选择器匹配的元素。

尝试：

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

Answer 2

您的脚本一旦搜索li.active元素并向其添加处理程序（事件2），并且一次搜索li:not(.active)元素并向其添加处理程序（事件1）。

您有两种方法可以解决这个问题：

每次分离并再次处理atach处理程序
创建动态处理程序。

第二种方式示例:(查看第二个.on()函数参数以及选择器）

$(function(){

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

Jquery事件处理程序“.on（）”

2 个答案: