问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了。
例如:点谁就显示谁的数值
<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 方法 升级就好了