jquery hotkeys binding dynamically

Question

I am using jresig's jquery hotkeys and it looks like it works for single hotkeys. The problem is I have a list of hotkeys from the db and I want to read them and assign the hotkeys dynamically. So I have a list of hotkeys and values and this is my js:

$(document).ready(function() {  
  var keyList = [];

  $('.hotkey').each( function(){
    hotkey = $(this).attr('value');
    hotkey = hotkey.substring(1,hotkey.length-1);

    myVal = $(this).next().attr('value');

    alert("binding " + hotkey);

    $(document).bind('keydown', hotkey, function() {
      alert("YOU PRESSED " + hotkey);
      $('.chosen-category-id').attr('value', hotkey);
      $('.chosen-category-name').attr('value', myVal);
    });  

  })
})

What happens now is that every time i press a key, it just alerts the last hotkey it bound. Is there something wrong with the logic here? I am keeping myself from copy pasting a zillion document.bind lines so I'm trying to do this dynamically.

EDIT

I refactored my code with this:

$(document).ready(function() {  

  var keyList = [];
  var keyValues = [];

  $('.hotkey').each( function(){
    hotkey = $(this).attr('value');
    hotkey = hotkey.substring(1,hotkey.length-1);

    keyList.push(hotkey);

    keyValues.push($(this).next().attr('value')) ;
  })


  $.each(
    keyList,
    function(index, key) {
      $(document).bind('keydown', key, function() {
        alert("O HAI YOU PRESSED " + key);
        $('.chosen-category-id').attr('value', key);
        $('.chosen-category-name').attr('value', keyValues[index]);
        return false;
      });  
    }
  )


})

it works now but im curious as to why this works and the other does not. Does the hotkey variable keep overwriting the last iteration? Also that first code looks more efficient as it only does one loop while this second code does two.

Could you post the markup used too? Preferably on jsfiddle.net? — Dogbert
what do you need to know about the markup? they are just a lot of input buttons with class hotkey and value with the format of "(hotkey)", also i edited the question — corroded
didnt mean to sound like a jerk there by the way. i just think the markup isn't relevant as im getting the correct values, the problem was the assignment of the bindings — corroded

kasdega kasdega · Accepted Answer · 2012-02-14T16:41:41

I had a similar problem. I had this:

$(document).bind('keypress', keyBinding, function(e) {
    e.preventDefault();
    $(this).trigger("click");
});

but after reading through some of the examples I changed that to:

$(document).bind('keydown', keyBinding, function(e) {
    $(this).trigger("click");
    return false; 
});

Both of these are/were inside an each loop just like yours where I assign the keybinding var to something like "Ctrl+s" or "Ctrl+Right". The interesting parts are obviously "keypress" and "return false;". What I have now works perfectly fine. The first code I had did not work in all browsers (chrome) but did work in FF.

The other tidbit I learned is that you have to be careful with the bindings. Some bindings won't work in all browsers. Ctrl+n for instance doesn't work in Chrome (maybe others). There are test pages included on the github site. I retrofitted one of them to work on my local development site so I could test key combos until I found ones that worked and made sense on the page.

jquery hotkeys binding dynamically

1 Answers