关于js重复绑定

在一次写js函数的时候，通过点击按钮，触发一个showPictrue时间

$("#gdtpwjbd").on("click", function() {
                    showPicture($("#gdtpwj_hidden").val());
})
function showPicture(url) {
        if(url == "") {
            alert('未上传！');
            return;
        }
        console.info('查看图片路径： ' + url);
        var image = new Image();
        image.src = url;
        var iWidth = image.width; //弹出窗口的宽度;
        var iHeight = image.height; //弹出窗口的高度;
        var iTop = (window.screen.availHeight - 30 - iHeight) / 2; //获得窗口的垂直位置;
        var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //获得窗口的水平位置;
        window.open(url, "", "height=" + iHeight + ", width=" + iWidth + ", top=" + iTop + ",  left=" + iLeft);

这个函数主要是对图片进行显示，但是在实际执行的时候，会出现这种情况，点击一次按钮，会出现两个弹出窗口，也就是函数被执行了两次。
造成这个现象的主要原因是累加绑定，因为我的绑定函数是放在页面的onload函数里面，所以没有加载页面的时候都会进行重复累加，当绑定多个click的时候，也就出现点击一次，执行多次。
解决办法，在每次绑定前，把上次的绑定接触：

$("#gdtpwjbd").off().on("click", function() {
                    showPicture($("#gdtpwj_hidden").val());
})

添加一个off，问题就会解决