动态添加的元素如何绑定事件
在代码中常常会遇到动态添加html标签的要求,并且还会为添加的标签绑定事件,但如何为动态标签添加事件,我总结了自己的方法。
例如:
在一个table的标签中动态添加th和td,某一个td中会添加button来进行增删改插的功能,如下图:
<table class="table table-bordered"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>电话</th> <th>操作</th> </tr> </table>
动态添加表格
var list='<tr><td>李明</td><td>男</td><td>20</td><td>88888888888</td><td><button type="button" id="select">按钮</button></td></tr>'; $("table").append(list)
给button添加点击事件时背景变红:
$("#select").on("click",function () { $(this).closest("tr").addClass("bg-danger") });点击按钮没有反应
怎么办?
我们来好好看一看jquery on的API
这是就要用到selector这个参数了,代码如下:
$("table").on("click","#select",function () { $(this).closest("tr").addClass("bg-danger") });
这时就能绑定事件了,
注意:
1.这种方法绑定事件必须绑定你要绑定事件元素的父元素上,如上边案例就绑定在table上,最好是静态的存在的元素。
2.on方法的选择器可以是各种元素选择器,id,class等。
3.在对事件处理时可以用$(this)选取当前元素进行操作,最好将$(this)存为一个变量方便操作。