Search code examples
javascriptjquerydelegateslive

Can't get .live on keydown working... any suggestions?


I tried using .on instead, and delegate, none of them worked. (code works when not live) Can anyone give me a hand here? I'm looping out a list (via ajax request) with the class of "qspholder" and this code should allow me to select and click items on the list using the arrow keys and enter. Yet for some reason I just cannot seem to get this working when I try to do it as live. I put it (the list) in a div with .html(data) after submitting and retrieving the values. This code is not on the page it is being loaded from, it's on the page I am loading it to. Can anyone give me some advice as to how I get this working? Thank you.

$(window).live("keydown", function(e){
        var liSelected;
        var li = $('.qspholder');
        $('.qspholder').removeClass('selected');
        if(e.which === 40){
            if(liSelected){
                liSelected.removeClass('selected');
                next = liSelected.next();
                if(next.length > 0){
                    liSelected = next.addClass('selected');
                }else{
                    liSelected = li.eq(0).addClass('selected');
                }
            }else{
                liSelected = li.eq(0).addClass('selected');
            }
        }else if(e.which === 38){
            $('.qspholder').removeClass('selected');
            if(liSelected){
                liSelected.removeClass('selected');
                next = liSelected.prev();
                if(next.length > 0){
                    liSelected = next.addClass('selected');
                }else{
                    liSelected = li.last().addClass('selected');
                }
            }else{
                liSelected = li.last().addClass('selected');
            }
        } else if(e.which === 13) {
            liSelected.click();
        }
    });

Solution

  • this works, apply it to your code

    $(document).on("keydown", function(e){alert(e.keyCode);});
    

    http://jsfiddle.net/KBPb4/10/

    applied to your original code ( also changed the IF to SWITCH )

    $(document).on("keydown", function (e) {
        var liSelected;
        var li = $('.qspholder');
        $('.qspholder').removeClass('selected');
    
        switch (e.keyCode) {
        case 40:
            if (liSelected) {
                liSelected.removeClass('selected');
                next = liSelected.next();
                if (next.length > 0) {
                    liSelected = next.addClass('selected');
                } else {
                    liSelected = li.eq(0).addClass('selected');
                }
            } else {
                liSelected = li.eq(0).addClass('selected');
            }
            break;
        case 38:
            $('.qspholder').removeClass('selected');
            if (liSelected) {
                liSelected.removeClass('selected');
                next = liSelected.prev();
                if (next.length > 0) {
                    liSelected = next.addClass('selected');
                } else {
                    liSelected = li.last().addClass('selected');
                }
            } else {
                liSelected = li.last().addClass('selected');
            }
            break;
        case 13:
            liSelected.click();
            break;
        }
    });