Keypress action query using jQuery class attribute

Question

I am implementing the view behavior using jQuery. I can input directly to the table td. I want to give an event when inputting to this td.

But the event is not recognized, what should I do?

Here is the code:

<div class="a">
   <table class="tb">
      <tr>
         <td></td>
      </tr>
   </table>
</div>
<script type="text/javascript">
   $(".a table tr td").on('keypress', function(event){
      console.log(event);
   });
</script>

It is an event required only on the page, so it is difficult to modify the common jQuery code that draws and enters the table.

How are you 'inputting' anything in to the `td` when it's not an editable field? — Rory McCrossan, Aug 16 '21 at 08:47
@Rory McCrossan There is a thing that makes input to td separately in jQuery common part. I'm sorry, but I can't seem to upload that part. — limsrs, Aug 16 '21 at 08:52
And because the development environment is an internal network, it cannot be connected to the outside, so there was a typo in that part while writing it with a smartphone. — limsrs, Aug 16 '21 at 08:53
@Abd Elbeltaji Sorry, I missed that part because I was writing on my smartphone. Edited in the text — limsrs, Aug 16 '21 at 08:58
@limsrs You still have an issue with your markup: you are closing a `` with a `` — Abd Elbeltaji, Aug 16 '21 at 09:04
Does this help? [Delegated Events](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Aug 16 '21 at 09:10
Note that `keypress` works for editable inputs not label or td or... — Alireza Ahmadi, Aug 16 '21 at 09:13
@Alireza Ahmadi Are you unable to use keypress as well as keydown? — limsrs, Aug 16 '21 at 09:18
@limsrs I'm not pointing `grammar mistakes, these are `syntax` errors. They can be the reason behind your issue, It's not that I'm trying to keep pointing mistakes, I'm trying to minimize the error margin to make sure that we reach the real reason behind your issue. — Abd Elbeltaji, Aug 16 '21 at 09:19

score 2 · Answer 1 · answered Aug 16 '21 at 09:09

The below code works, so if it doesn't work in your case, that probably means that the <input> field is not yet added by your other "common" code, at the time you add the keypress listener.

So the solution should be to first add the <input> fields, and after that you execute your key handler code.

<div class="a">
  <table class="tb">
    <tr>
      <td><input type="text"></td>
    </tr>
  </table>
</div>

Execute this AFTER the input fields have been added

$(".a table tr td").on("keypress", function (event) {
  console.log(event.key);
});

Working example here: https://jsfiddle.net/081cL2xu/

score 2 · Accepted Answer · answered Aug 16 '21 at 09:20

2

Based on this:

A keypress event handler can be attached to any element, but the event is only sent to the element that has the focus

So you need to have focusable element, see this to know what are the focusable element: Which HTML elements can receive focus?

If I have textbox in td everything going to be fine:

$(".a table tr td").on('keypress', function (event) {
  console.log(event.key);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="a">
        <table class="tb">
            <tr>
                <td><input /></td>
            </tr>
        </table>
    </div>

answered Aug 16 '21 at 09:20

Alireza Ahmadi

8,579
5
15
42

@limsrs Yes also `keypress` need focusable element – Alireza Ahmadi Aug 16 '21 at 09:24
I made it possible to receive input in td using script code. I do not know the details because I did not develop the part, but the conclusion is that the grammar you pointed out is because I made a typo while writing it using a smartphone, and it is written normally in the place where it is actually developed. Also, it is written without input in td. – limsrs Aug 16 '21 at 09:25
@limsrs So now your problem has been solved? Is there any question? – Alireza Ahmadi Aug 16 '21 at 09:27
I think I'll have to try adding elements after talking with my supervisor tomorrow. Thanks. – limsrs Aug 16 '21 at 09:29

Keypress action query using jQuery class attribute

2 Answers2