事件委托与绑定问题

问题描述：前端动态生成的按钮元素，通过js方式委托事件，在通过ajax向后端请求数据，会造成程序的重复执行。

好像是比较简单，但是没经历过的，可能还是不知所云。那就从事件绑定开始说起：

这里说到的两种事件绑定分别是这样婶儿的：

js方式的事件委托：

document.querySelector(".popUp_ok").addEventListener('click', function(e) {
   console.log("原生事件委托"); 
})

jquery方式绑定：

$(".popUp_ok").on('click', function(e) {
    console.log("jquery事件绑定");
}）

然后上一段碰到问题的代码：

document.querySelector(".popUp_ok").addEventListener("click", function(e) {　　

　　　　　　　...
            $.ajax({
                type: "POST",
                url: ...,
                data: {...},               
                dataType: 'json',            
                cache: false,
                success: function (data, textStatus) {
                    if (!data.error) {
                        ...       
                    }
                },
                error: function () {}

})

这里的过程是：点击按钮之后，触发委托的事件，ajax获取数据成功后，就会局部刷新页面的内容。

当第一次操作时，没什么问题，但是当第二次刷新的时候，同样会将之前的过程执行一趟，而且会将之前已经局部刷新的数据，再一次修改成另外一个数据，第三次，同样会把之前两次修改过的数据，再修改成其他的数据，...以此类推。很明显有问题！

最后，经过一番折腾，发现：这样的操作，会给每一个同样className的元素，创建一个委托事件队列（如下图）；

所以就想到了每一次操作完成之后，给元素解绑。但是，在js原生方法中，remove委托事件，不起作用，最后就换成了jquery中的办法：前面不用委托事件，直接给元素绑定事件，页面局部刷新之后，解绑，搞定！（非前端人员，不求甚解，欢迎指点）

正确做法：

$(".popUp_ok").on('click', function(e) {
            ...

            $.ajax({
                type: "POST",
                url: ...,
                data: {...},               
                dataType: 'json',            
                cache: false,
                success: function (data, textStatus) {
                    if (!data.error) {
                        ...
                        //以上步骤执行完成之后，将事件解绑
                        $(".popUp_ok").off('click');         
                    }
                },
                error: function () {}
            });
        });