unbinding keydown jquery

Question

I have created a method where you press the left and right keys and it goes from either the next or the previous page. the problem is that once you change it to another album the keypress methods are still bound to the previous album so you press the right key it will change the image in both the current and previous albums.

I have tried unbind the key press from the document it is targeted to, but it just stops working.

var doNext = function () {
    if (pageNumber >= totalPages - 1) {
        pageNumber = totalPages;
        //alert(pageNumber);
    }
    else if (pageNumber <= totalPages) {
        nextPage = pageNumber += 1;
        //alert(nextPage);
        $("select#page1").get(0).selectedIndex = nextPage;
        $("select#page2").get(0).selectedIndex = nextPage;


        $('#mangaImage').attr('src', data[nextPage]['imageLocation']);

        $("#mangaImage").load(function () {
            $('#mangaImage').attr('width', data[nextPage]['imageWidth']);
            $('#mangaImage').attr('height', data[nextPage]['imageHeight']);
            $('#contentInner').css("width", data[nextPage]['imageWidth'] + "px");
            $('#page').css("width", data[nextPage]['imageWidth'] + "px");
        });
    }
};

and here is the keydown code which uses the method above

$(document).keydown(function (e) {
    if (e.keyCode == 39) {
        alert("right pressed");
        doNext();
        return false;
    }
});

http://www.neuromanga.com/mangaReader1.0.php?cid=1

Answer 1

Instead of using $("#mangaImage").load(function () { ..});, you should be using $("#mangaImage").one('load', function () { .. });. What you're currently doing is adding a new event handler each time the key is pressed; and not removing any.