Question

how to reset the keydown function using jquery?

For example, I two ul list of data and each have a document.keydown method to controll the scrolling either left or right.

            $(document.keydown(function(e1)
            {
                // ul list 1 - insert data

               if(e.which == leftArrowKey1)
               {
                       // scroll left

               }else if(e.which == rightArrowKey1 || e.which == spacebarKey1)

                      // scroll right                                               
               }
            });
            $(document.keydown(function(e2)
            {
                  // ul list 2 - insert data

               if(e2.which == leftArrowKey2)
               {
                  // scroll left

               }else if(e2.which == rightArrowKey2 || e2.which == spacebarKey2)

                  // scroll right                     
               }
            });

THe Problem

The problem is after I scroll either left or right of the first list, I can scroll the other list even after I insert data into it. For example, I insert data into list A, and can successfully scroll either left or right. Now I insert data into list B, I can not scroll either left or right of list B and it continues to scroll list A.

Answer 1

I think you need to read up on the keydown function a bit. The example on that page will work for you.

Also, you have a small problem with your code,

$(document.keydown(e1)
{
     // Your code
});

Should be

$(document).keydown(function(e1)
{
     // Your code
});

Edit:

The easiest way to handle both lists at the same time is give them a class, lets say scrollable. One thing you will have to do is add a tabindex attribute to your ul elements so they are focusable: <ul class="scrollable" tabindex="1">. You’ll have to click on the list you want to scroll before the keydown event will fire.

Note: each ul will need a unique tabindex (make the 2nd list’s tabindex=2)

Now the jQuery is quite simple:

$('ul.scrollable').keydown(function(event)) {
    // Your scrolling code
}