jsFiddle demo link

Hi Guys, I want to bind the keypress event handler when i click the div layer as given in the above demo. The feature is to use the delete key to remove the selected layer.

But when i hit the delete key, the keypress handler doesn't fire. Please suggest.

jsFiddle demo link

Hi Guys, I want to bind the keypress event handler when i click the div layer as given in the above demo. The feature is to use the delete key to remove the selected layer.

But when i hit the delete key, the keypress handler doesn't fire. Please suggest.

• javascript
• jquery
• jquery-ui
• keyboard-events
• jquery-resizable

Share Improve this question Follow edited Jun 14, 2012 at 6:31 Engineer 48.8k1212 gold badges9090 silver badges9292 bronze badges asked Jun 13, 2012 at 6:45 KaranKaran 3,3381010 gold badges6161 silver badges8888 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Remove '()':

$this.on("keypress", keyAction);

You are adding undefined as handler: $this.on("keypress", keyAction()) is equal to $this.on("keypress", undefined) in your case, as keyAction function does not return anything.

Also your div must be focusable, in order to receive keyboard events. For that reason you need to add tabindex on it:

<div class="dragClass" tabindex="0">

Then in selectAction focus your div to receive keypress event:

$this.focus();

This is the DEMO

For more information about adding keyboard events on static elements such as div, look at here:

Use this code it execute for delete key        
             $("#ParentDIV").keyDown(function (e) {
              if (e.keyCode == 46) {
               // Do it
              }
             });

In order for an element to receive keypress events, it needs focus. One way is to add a tabindex. If you click on your element then click a keyboard button in the below fiddle, you'll get your event. I stripped down the fiddle a bit and removed the draggable which is interfering with focus.

http://jsfiddle/e2yfC/27/