用jquery查找单击的<li>标记的ID和文本

时间:2019-07-15 04:58:20

标签: jquery html

我的HTML页面中有一些列表标记。我想分别查找列表标记的文本和ID。由于我的列表是在运行时创建的,因此我无法弄清楚如何获取id和text值。

我已经尝试过了

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

但是它不会触发任何点击事件。

HTML部分

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

jquery部分

$(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);
   });
}

3 个答案:

答案 0 :(得分:1)

也许尝试$users.on("click",".list-group-item",function(...){ .... });

编辑:

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

@Dipto Roy

答案 1 :(得分:0)

尝试使用此代码

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

答案 2 :(得分:0)

您可以尝试一下

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