Geek Answers Handbook

Enter start keyword

I have a jQuery scroller on a page where each element is a div with id. each div has a link to the next div in the scroller (all on one page)

$('a.panel').click(function () { };

I have a click event for all links with the "panel" class, where I check which links were clicked, and then do some ajax processing:

  if($(this).attr('href')=="#item2") { //do some processsing }

and as soon as the processing is done, I use the scrollTo jQuery method to go to the next div

I need the user to be able to press enter instead of clicking on the link. Now the problem is: a. I have several links on one page that all should have this behavior. b. I need to distinguish which link raised the click event and do some server side processing.

Is this even possible?

I appreciate quick and helpful answers !! Thanks a million for the help!

+4
source share
4 answers

Focus + input will trigger a click event, but only if the binding has the href attribute (at least in some browsers, for example, in Firefox). Works:

 $('<a />').attr('href', '#anythingWillDo').on('click', function () { alert('Has href so can be triggered via keyboard.'); // suppress hash update if desired return false; }).text('Works').appendTo('body');

Doesn't work (browser probably doesn't see any action):

 $('<a />').on('click', function () { alert('No href so can\'t be triggered via keyboard.'); }).text('Doesn\'t work').appendTo('body');
+6
source

You can trigger() click the event of any item when the enter key is pressed. Example:

 $(document).keypress(function(e) { if ((e.keyCode || e.which) == 13) { // Enter key pressed $('a').trigger('click'); } }); $('a').click(function(e) { e.preventDefault(); // Link clicked });

Demo: http://jsfiddle.net/eHXwz/1/

You just need to figure out which specific element triggers the click, but it depends on how / what you do. I will say that I really do not recommend this, but I will give you the benefit of doubt.

The best option, in my opinion, would be focus() link to be clicked on, and let the user press the enter key to fire the click event anyway.

I would like to focus on the link, but don’t know how to do this, can you explain?

Just use $(element).focus() . But again, you need to be more specific and have a way to determine which element should receive focus, and when. Of course, the user can take actions that cause the link to lose focus, for example, clicking elsewhere. I have no idea what your application does or works like that, so just do what you think is best, but remember that users already expect certain behavior from their browsers and most likely they won’t understand that they need to press enter if only you tell them.

If you prefer to use the “hit enter” method instead of focusing the link, you most likely want the bind() and unbind() functions, so they won’t be called. This is necessary.

Connected:

+2
source

Use the e.target or this to determine which link raised the event.

 $('a.panel').click(function (e) { //e.target or this will give you the element which triggered this event. };
0
source 
 $('a.panel').live('keyup', function (evt) { var e = evt || event; var code = e.keyCode || e.which; if (code === 13) { // 13 is the js key code for Enter $(e.target).trigger('click'); } });

This will detect a key activation event on any a.panel, and if it were an input key, it would then trigger a click event for a focused panel element.

0
source

More articles:


All Articles