how to know which children element was clicked

Question

I'm still learning jquery and I would like to know if there was a way to check what element inside that .alphabet div was clicked. Is this the correct way to do it?

$(document).on("click", ".alphabet", function() { 

 var id = $(this).children().attr('id');
  console.log(id); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabet">
  <a id="a">a</a>
  <a id="b">b</a>
  <a id="c">c</a>
  <a id="d">d</a>
</div>

Thanks

score 2 · Answer 1 · answered Dec 01 '20 at 18:35

2

Add click event for the <a> tag.

$('a').on("click", function() {
  console.log($(this).attr('id'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabet">
  <a id="a">a</a>
  <a id="b">b</a>
  <a id="c">c</a>
  <a id="d">d</a>
</div>

answered Dec 01 '20 at 18:35

William Wang

8,051
3
5
28

hi William, thanks, but I would told to user the method : `$(document).on()` which is better nowadays, is this true? – pual Dec 01 '20 at 18:41
2

Refer to this - https://stackoverflow.com/questions/14879168/document-onclick-id-function-vs-id-onclick-function – William Wang Dec 01 '20 at 18:44

showdev · Accepted Answer · 2020-12-01T20:54:00.790

jQuery's children() returns all children of the selector. In your context, you'll get all of the links instead of the one that was clicked. Here's a demonstration:

$(document).on("click", ".alphabet", function() {
  let $children = $(this).children();
  $children.each((k, item) => console.log(item.id));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabet">
  <a id="a">a</a>
  <a id="b">b</a>
  <a id="c">c</a>
  <a id="d">d</a>
</div>

One idea is to target the <a> tags instead of the <div>:

$(document).on("click", ".alphabet a", function() {
  console.log(this.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabet">
  <a id="a">a</a>
  <a id="b">b</a>
  <a id="c">c</a>
  <a id="d">d</a>
</div>

Another idea is to use the event target:

$(document).on("click", ".alphabet", function(e) {
  console.log(e.target.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabet">
  <a id="a">a</a>
  <a id="b">b</a>
  <a id="c">c</a>
  <a id="d">d</a>
</div>

Finally, unless the .alphabet element or its children are dynamically generated, event delegation is likely not necessary. You can bind the event handler directly to the link elements, like so:

$('.alphabet a').on("click", function(e) {
  console.log(this.id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alphabet">
  <a id="a">a</a>
  <a id="b">b</a>
  <a id="c">c</a>
  <a id="d">d</a>
</div>

Also see Event binding on dynamically created elements?

yep, that's working well! Thanks a lot! – pual Dec 01 '20 at 18:40 — pual, Dec 01 '20 at 18:40

score 0 · Answer 3 · answered Dec 01 '20 at 18:36

No, it is not correct. You are add event listener to main div, so event will be triggered when you clicked to this div and no matter on which child element you are clicked. You need to add listener to each child element if you want to determine the target.

how to know which children element was clicked

3 Answers3