jQuery事件累加问题解决办法

今天做一个很简单的小demo，遇到事件累加问题，硬是弄了一个小时，一直在找问题。

问题：用jquery的on()方法绑定点击事件，第一次点击没有问题，当第二次点击时，function里面的代码对执行两次，点击越多，执行次数也会相应增加。注:我的代码中只有一个元素绑定事件，故排除事件冒泡。

function bindEvent() {
    var $change=$wrapper.find('.change');
    $change.on('click',function () {
        curPage=++curPage%totalPage;
        renderPage(data);
        console.log(curPage);
    });

}

点击一次:

 当点击第二次的时候：

点击第二次时，页面直接到第三页，跳过第二页

开始以为是逻辑错误，一直在找错，后面查阅资料才知道是事件累加问题。 

解决办法：

1.绑定事件前先解绑事件（最使用）

function bindEvent() {
    var $change=$wrapper.find('.change');
    $change.off('click').on('click',function () {
        curPage=++curPage%totalPage;
        renderPage(data);
        console.log(curPage);
    });

}

2.用one()方法

function bindEvent() {
    var $change=$wrapper.find('.change');
    $change.one('click',function () {
        curPage=++curPage%totalPage;
        renderPage(data);
        console.log(curPage);
    });

}