My code doesn't recognize jQuery selector?

Question

I want to get the value inside a specific <div> that my code auto generate but when I use jQuery syntax it seems like that syntax does not recognize id tagged div.

HTML code is hold inside Variable, below is one <div> cover by td tag that I want to get the data inside this <div>! The string interpolation (${count}) is correct - I have tested it by put it inside <div></div> and its output is correct which is increase from 1 to the n base on my for loop above to initialize <div>.

<td><div id='${count}' contenteditable='true'>editable</div></td>

$("#1").keypress(function (e) {
  if (e.which === 13) {
     // I don't know how get this text inside it too :( 
  }
});

Can anyone help me please?!

When you say HTML code is held in a variable does that mean you don't add it to the page DOM? — apokryfos, Aug 14 '19 at 10:51
@apokryfos I'm not sure! Is this line mean have already added to page DOM: this.target.innerHTML = varContainHtmlCode — Tung Nguyen, Aug 15 '19 at 02:12

score 1 · Accepted Answer · answered Aug 14 '19 at 10:51

1

You can use the this keyword to reference the contenteditable div element which raised the event. From there you can use html() to get its contents.

Also note that your logic implies that the div is dynamically appended to the DOM. As such you will need to use a delegated event handler, as the element doesn't exist when the page loads. Try this:

$(document).on('keypress', '#1', function(e) {
  if (e.which === 13) {
    var content = $(this).html();
    console.log(content);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div id="1" contenteditable="true">editable</div>
    </td>
  </tr>
</table>

answered Aug 14 '19 at 10:51

Rory McCrossan

331,213
40
305
339

Thanks for your help, you save my day! But can you explain me about using delegate event handler which you mention above please! @Rory McCrossan – Tung Nguyen Aug 15 '19 at 02:38
No problem, glad to help. A standard event handler requires the element to exist in the DOM when the JS runs. A delegated event handler instead hooks to the selector you provide at any point it becomes available in the DOM, even in the future. For more detail see [this question](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) – Rory McCrossan Aug 15 '19 at 07:19

score 0 · Answer 2 · edited Aug 14 '19 at 10:55

0

Hope this is what you are looking for . kepress event is intended for input .

var count = 1;

var HTML = '<input id=' + count + ' contenteditable="true" placeholder="Press Enter">';

$(".test").html(HTML)

$("#1").keypress(function(e) {
  if (e.which === 13) {
    alert(1)
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="test"></div>

edited Aug 14 '19 at 10:55

Vikas Jadhav

4,597
2
19
37

answered Aug 14 '19 at 10:51

Deepak A

1,624
1
7
16

Thanks for helping me! But it seems your code is not worked in my case! I combined Typescript with jQuery and the library of jQuery install by npm, the line: $(".test).html(HTML) - can you explain me what is this for? Also I have followed with your instruction too by adding this single line too (But in my case class name "test" is inside tag which cover outside all my
and nothing happen then :( @Obito Uchiha
– Tung Nguyen Aug 15 '19 at 02:35

My code doesn't recognize jQuery selector?

2 Answers2