binding shortcuts after an ajax call

binding shortcuts after an ajax call

I'm using jquery 1.4.2 with jquery.hotkeys-0.8 (from github repository) and I'm having trouble with binding shortcuts to links after I load a new page into my div called content.

Here is my jQuery:

  1. function bind_shortcuts(target){
  2.     // Step through every ajax link and bind the keys in accesskey to that link
  3.     $('a.ajax[accesskey]').each(function(e){
  4.           key = $(this).attr('accesskey');
  5.           link = $(this);
  6.           target.unbind('keydown', key, function(e){ }); // doesn't unbind???
  7.           target.bind('keydown', key, function(e){ link.click(); e.preventDefault(); });
  8.     });
  9. }
  10. $(document).ready(function(event){
  11.     bind_shortcuts($(document));


  13.     // Ajax navigation
  14.     $('a.ajax').live('click', function(e) {
  15.       e.preventDefault();
  16.       link = $(this);
  17.       $('#'+link.attr('target')).load(link.attr('href'), function() {
  18.           bind_shortcuts($(document));
  19.       });
  20.     });
  21. });
Here is an example link
  1. <p><%= link_to "New Product", new_product_path, :id => "new_product", :class => 'ajax', :target => 'content', :accesskey => 'f1' %></p>

The main problem at the moment is that when I jump between the new product form the the listing using the shortcut keys I can see that it starts duplicating the shortcut key binds for the 'New Product' link every time I go back to the main listing page where that link is situated.

If I take out the 'bind_shortcuts' function call on the load method then the new links will not get shortcut key bindings attached to them at all.