对ul 下的li标签执行点击事件

在项目中,经常遇到动态加载的数据并使用相同标签的情况。本文介绍了如何使用jQuery对无class属性的li元素及包含多个子元素的li元素进行点击事件处理,展示如何获取点击的li元素内的文本或特定子元素内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题来源:做项目时,一般的数据都是用循环动态的加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理。

点谁就显示谁的值:


<ul id="test">   

  <li class="test" >1</li>

<li class="test" >2</li>

<li class="test" >3</li>

<li class="test" >4</li>

</ul>


1、如果没有class属性的时候

在相同的标签外部(随便找一个即可,需要包裹所有的相同标签)

(ul包裹了所有的li,on里面的第一个参数:需要做的事件类型,第二个参数:对谁做执行这个事件的对象)


$("ul#test").on("click","li",function(){

alert($(this).text());

})


  2、

<ul id="test">   

 <li class="test" >
        <div class="div-text" style="width: 100%; height: 100%;">
            <p class="projectName" >${ProjectName}</p>
            <p class="stationName" >${StationName}</p>
            <p class="time">${UpdateTime}</p>
            <p class="ip" >${TesterIP}</p>
        </div>
    </li>

</ul>

$("ul#test").on("click","li",function(){

 alert($(this).find("p.ip").text());

})




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值