Search code examples
javascriptjqueryjquery-uikeyboard-eventsjquery-resizable

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

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.

Solution

  • 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: