關於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，問題就會解決