對Ul下的li標簽執行點擊事件——如何獲取你所點擊的標簽

問題所來：做項目時，一般的數據都是用循環動態加載出來的，結構都是一樣的，只是綁定的值不同，如何對相同的標簽做處理的問題就來了。

例如：點誰就顯示誰的數值

<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中的li

$("ul#test").on("click","li",function(){      //只需要找到你點擊的是哪個ul里面的就行

     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).parent('tr')).remove();  //刪除你點擊的行

   });

　　2解：有class屬性    通過循環來做

$(".test").each(function(){
    alert( $(this).text());
});

　　3解：有class屬性

 

$(".test").click(function(){
    alert( $(this).text());
});

　　

挺有意思的一個小問題 雖然不難  但想了好一會 寫不出來的時候才意識到自己太依賴搜索引擎 基本功都忘了

還有一段小插曲

出現這個問題是因為Jquery版本問題 這是個老項目 jquery版本太低不支持on 方法 升級就好了

 

原文鏈接 https://www.cnblogs.com/Sea1ee/p/6204596.html