怎样解决Js代码中click事件重复触发

最近在工作中遇到了一个bug,我在点击"新建问题"时会弹出一个模态窗,在模态窗中,有一些勾选框可以进行选择勾选,然后进行提交。当我信息没有填写完整时,关闭模态窗后,再次打开"新建问题"模态窗时,再去勾选选择时,发现不能进行选择。然后我开始去调试,发现这个click事件触发了两次,所以并没有什么变化。

接下来给大家看看相关代码和截图

$('.category').click(function () {
            //勾选框展示所属领域
            check_cate = $(this).find('.checkbox').next().hasClass('hide');
            if (check_cate) {
                $(this).find('.checkbox').addClass('hide');
                $(this).find('.checkbox').next().removeClass('hide');
                $(this).find("label").find('input').prop('checked', true);
            } else {
                $(this).find('.checkbox').removeClass('hide');
                $(this).find('.checkbox').next().addClass('hide');
                $(this).find("label").find('input').prop('checked', false);
            }
        })

此时我们分析上面这段代码这么写有什么问题。  为什么事件会重复两次执行?

然后查阅了一些资料以后发现,第二次的事件绑定和第一次的事件绑定都注册到了同一个div身上,在jQuery中事件注册同时注册到同一个div时,只要不消毁就会累计执行。这就是根本原因所在。在这期间我尝试过很多方法,结果都没有成功。最终的解决方案如下:

// 防止click事件重复触发,先解除绑定,再进行绑定
        $('.category').off('click');
        // 选择所属领域
        $('.category').click(function () {
            //勾选框展示所属领域
            check_cate = $(this).find('.checkbox').next().hasClass('hide');
            if (check_cate) {
                $(this).find('.checkbox').addClass('hide');
                $(this).find('.checkbox').next().removeClass('hide');
                $(this).find("label").find('input').prop('checked', true);
            } else {
                $(this).find('.checkbox').removeClass('hide');
                $(this).find('.checkbox').next().addClass('hide');
                $(this).find("label").find('input').prop('checked', false);
            }
        })

没错,我们需要在绑定事件之前先解除再进行绑定,将jQuery事件进行销毁再绑定。最后成功解决了这个bug。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值