JQuery ON selector not working

Question

I created a custom JS function that uses a keyboard to work with table rows. In fact, I use the up / down keys to select a row (preview details) and Enter to simulate a double click (edit data).

It works very well, you can view a working example at http://jsfiddle.net/n6hn2/19/ Just focus on the table and try Up / Down / Enter and see Console ..

• Why does this not work with a selector like this

  $('#' + tableid).on('keyup', 'tbody', function(e) {...
  

  also tried "tbody tr" as a selector and $('#' + tableid + ' tbody tr'), but nothing.

• When I enter something into the input field ( search_article) and HIT Enter, my DblClick function starts. Which is actually normal without a selector, but I don't want that.

Answer 1

By default, the element is tbodynot configurable, you need to set any tabindex attribute to tbody, for example:

tabindex="-1"

See full DEMO using also CSS scheme:

#tableid :focus {outline:none;}

So you can use the keyboard handler for tbody:

$('#' + tableid).on('keyup', 'tbody', function(e) {...});

Answer 2

• you need to add tabindex = "0" add your class or id

like this:

 <table id="tableid" tabindex="0">

and

$("#tableid").on('keyup', function(){
    console.log("2");
});

check it out: http://jsfiddle.net/mehmetakifalp/n6hn2/25/

Answer 3

I forked the code and this fiddle works fine: http://jsfiddle.net/5mxS2/

The biggest difference is that it is onnow attached to inputas follows:

$('#' + tableid + ' input').on('keyup', function(e) {
    alert('up');
});