Find the id and text of the clicked
tag with jquery

Question

I have some list tag in my HTML page .I want to find the text and id of list tag separately. Since my list is created in the run time so I cant figure out how to get the id and text value.

I have tried this

$("#users li").click(function(e) 
{ 
     console.log($(this).text());
     console.log($(this).id);
});

But it is not triggering any click event.

HTML part

<div class="card card-body bg-light">
    <h3>Online Users</h3>
    <ul class="list-group" id="users"></ul>
</div>

jquery part

$(function () {
    var socket =io.connect();
    var $users =$('#users');

    socket.on('get users',function(data){
    var html='';
    for(var i=0;i<data.length;i++){
         html+='<li class="list-group-item" id="'+i+'">'+data[i]+'</li>';
    }
    $users.html(html);
    });

    $($users).click(function(e) 
   { 
    console.log($(this).text());
    console.log($(this).id);
   });
}

score 2 · Accepted Answer · edited Jul 15 '19 at 07:25

2

Maybe try $users.on("click",".list-group-item",function(...){ .... });

Edit:

$users.on("click",".list-group-item",function(e){ console.log($(this).text()); console.log(e.target.id); });

@Dipto Roy

edited Jul 15 '19 at 07:25

Dipto Roy

163
1
14

answered Jul 15 '19 at 05:02

Veselin Stoyanov

106
8

You can get the correct quotes by holding and sliding on an iPhone – mplungjan Jul 15 '19 at 05:03
Thank! I don’t know why I am trying to post from iPhone... my mistake – Veselin Stoyanov Jul 15 '19 at 05:04
https://meta.stackexchange.com/questions/133673/is-there-a-way-to-enter-back-tick-backtick-on-so-when-using-ipad-or-iphone – mplungjan Jul 15 '19 at 05:05
You also missed a dot in the class name AND wrapped $(users) unnecessarily ;) – mplungjan Jul 15 '19 at 05:08
I have tried this.I can get the text of the list. But cant get the id. It is printing undefined. – Dipto Roy Jul 15 '19 at 05:22
```$users.on("click",".list-group-item",function(e){ console.log($(this).text()); console.log(e.target.id); });``` – Dipto Roy Jul 15 '19 at 06:01
please edit the answer to this. @Veselin – Dipto Roy Jul 15 '19 at 06:01

Kirtee · Answer 2 · 2019-07-15T06:27:10.030

0

Try with this code

$(document).on('click','#users li',function(){
    console.log($(this).text());
    console.log($(this).attr('id'));
});

edited Jul 15 '19 at 06:27

answered Jul 15 '19 at 05:02

Kirtee

141
9

1

Actually since `$('#users')` is likely static, it is closer to the event target to do `$('#users').on('click','li',function(){` or `$users.on('click','li',function(){` – mplungjan Jul 15 '19 at 05:07
I have tried this. I can print the text of list tag. But the printing of id is giving undefined. – Dipto Roy Jul 15 '19 at 05:23
try with consoel.log($(this).attr('id')); check my edited answer – Kirtee Jul 15 '19 at 06:26

score 0 · Answer 3 · answered Jul 15 '19 at 05:09

0

you can try this,

   $("#users li").click(function(e) 
   { 
    console.log($(this).text());
    console.log(this.id);
   });

answered Jul 15 '19 at 05:09

ArunKumar M N

1,256
1
10
22

No he cannot. That is not delegation. Please read the dupe – mplungjan Jul 15 '19 at 05:10

Find the id and text of the clicked tag with jquery

3 Answers3

Find the id and text of the clicked
tag with jquery