CODEWITHSUNDEEP
javascriptjquery
MiTja
MiTja

Reputation: 61

JQuery ON selector not working

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

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

  1. Why this doesn't work with selector, like this

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

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

  2. When I enter something in input box (search_article), and HIT Enter, my function DblClick is triggered. Which is, in fact OK without selector, but I don't want that.

Upvotes: 4

Views: 263

Answers (3)

A. Wolff
A. Wolff

Reputation: 74420

By default, tbody element is not focusable, you need to set any tabindex attribute on tbody, e.g: 

tabindex="-1"

See complete DEMO using CSS outline too:

#tableid :focus {outline:none;}

So then, you can use keyup handler on tbody:

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

Upvotes: 1

ilivewithian
ilivewithian

Reputation: 19692

I've forked the code and this fiddle seems to work fine: http://jsfiddle.net/5mxS2/

The biggest difference is that the on now attaches to the input like this:

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

Upvotes: 0

mehmetakifalp
mehmetakifalp

Reputation: 455

  1. 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");
});

test it : http://jsfiddle.net/mehmetakifalp/n6hn2/25/

Upvotes: 0

Related Questions