Jquery UI - dynamically bind the keypress event on the clicked div

Question

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.

Answer 1

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:

Answer 2

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

Answer 3

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.net/e2yfC/27/