对Ul下的li标签执行点击事件(转载)

 ——如何获取你所点击的标签

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

例如：点谁就显示谁的数值

<ul >

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

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

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

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

</ul>

 

错误：这种做法永远只能取到第一个

$("#test").click(function(){

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

 

1解：   没有class属性的时候   

 在相同的标签外部（随便找一个即可，需要包裹所有的相同标签）  

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

 对于ul中的li

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

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

对于表格中的td

<table class="display" id="example" cellspacing="0" width="100%">
<thead>
<tr> <th>型号编号</th> <th>型号名称</th> <th>型号描述</th> <th>创建时间</th>  <th>操作</th> </tr>
</thead>

<tbody>
<tr> <td>1</td> <td>车子</td> <td>描述</td> <td>2016/11/15</td>  <td> <button id='delrow' type='button'>删除</button> </td> </tr>

<tr> <td>2</td> <td>衣服</td> <td>描述2</td> <td>2016/11/16</td>  <td><button id='delrow' type='button'>删除</button></td> </tr>

</tbody>
</table>

 

$('#example tbody').on('click', 'button#delrow', function () {

     var tt = $("#example").DataTable();
      tt.row($(this).parents('tr')).remove();  //删除你点击的行

   });

 

2解：有class属性    通过循环来做

$(".test").each(function(){

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

});

 

3解：有class属性

$(".test").click(function(){

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

});