怎样解决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。