I have a JQuery scroller on a page where each item is a div with an id. each div has a link to the next div in the scroller (all on the same page)

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

I have a click event to all links with the 'panel' class where I check which links was clicked and then do some ajax processing accordingly:

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

and once the processing is done I use the scrollTo JQuery method to scroll to the next div

I need to have it that the user can press the enter key instead of clicking on the link. Now the problem is: a. I have several links on the same page that all need to have this behaviour. b. I need to differentiate which link triggered the click event and do some server-side processing.

Is this possible at all?

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

I have a JQuery scroller on a page where each item is a div with an id. each div has a link to the next div in the scroller (all on the same page)

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

I have a click event to all links with the 'panel' class where I check which links was clicked and then do some ajax processing accordingly:

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

and once the processing is done I use the scrollTo JQuery method to scroll to the next div

I need to have it that the user can press the enter key instead of clicking on the link. Now the problem is: a. I have several links on the same page that all need to have this behaviour. b. I need to differentiate which link triggered the click event and do some server-side processing.

Is this possible at all?

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

• javascript
• jquery
• hyperlink
• scroll

• 1 I'm pretty sure focus + enter key will trigger click() already, are you sure this doesn't already work as expected? Or did I miss the point of the question? – No Results Found Commented Aug 4, 2011 at 19:20
• thanks for the response, I am not sure what you mean? do i need to set the focus? how does the work? – NinaNa Commented Aug 4, 2011 at 19:21
• What do you mean by "I need to have it that the user can press the enter key instead of clicking on the link"? Is there only one link? If so, are you just asking how to check if "enter" was pressed? – No Results Found Commented Aug 4, 2011 at 19:22
• i would like it that when the user clicks the enter on the keyboard it will work the same as using the mouse to click on the actual link – NinaNa Commented Aug 4, 2011 at 19:24
• it is a scroller and every slide has it's own link – NinaNa Commented Aug 4, 2011 at 19:24

4 Answers 4

Focus + enter will trigger the click event, but only if the anchor has an href attribute (at least in some browsers, like latest 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 thinks there's no action to take):

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

You can trigger() the click event of whichever element you want 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'll just have to figure out which specific element to trigger the click on, but that depends on how/what you are doing. I will say that I don't really recommend this, but I will give you the benefit of the doubt.

A better option, in my opinion, would be to focus() the link that should be clicked instead, and let the user optionally press enter, which will fire the click event anyways.

I would like to focus on the link, but am unfamiliar exactly how to do this, can you explain?

Just use $(element).focus(). But once again, you'll have to be more specific, and have a way to determine which element should receive focus, and when. Of course the user, may take an action that will cause the link to lose focus, like clicking somewhere else. I have no idea what your app does or acts like though, so just do what you think is best, but remember that users already expect a certain kind of behavior from their browsers and will likely not realize they need to press "enter" unless you tell them to.

If you do choose to use the "press enter" method instead of focusing the link, you'll likely want to bind() and unbind() the keypress function too, so it doesn't get called when you don't need it.

• http://api.jquery.com/focus/
• http://api.jquery.com/bind/
• http://api.jquery.com/unbind/

Related:

• Submitting a form on 'Enter' with jQuery?
• jQuery Event Keypress: Which key was pressed?

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

$('a.panel').click(function (e) {
  //e.target or this will give you the element which triggered this event.
};

$('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 up event on any a.panel and if it was the enter key will then trigger the click event for the panel element that was focused.